ابتدا اجازه دهید به بررسی نحوه تبدیل لیست‌ها در جاوااسکریپت بپردازیم.
\nبا توجه به کد زیر، ما از تابعmap() استفاده می‌کنیم تا آرایه‌‌ای از اعداد با نام numbers را گرفته و مقادیرش را دو برابر کند. آرایه‌ی جدیدی که توسط map() برگشته را به متغیر doubledاختصاص می‌دهیم و آن را چاپ می‌کنیم.
const numbers = [1, 2, 3, 4, 5];\nconst doubled = numbers.map((number) => number * 2);console.log(doubled);این کد [2, 4, 6, 8, 10] را در کنسول چاپ میکند.
در ری‌اکت تبدیل آرایه‌ها به لیستی از المنت‌ها به صورت مشابه انجام میشود.
\nمی‌توانید با استفاده از آکولاد {}، مجموعه‌ای از المنت‌ها را بسازید و آن‌ها را در JSX درج کنید.
در قسمت زیر ما با استفاده از تابع map() در جاوااسکریپت، بر‌روی آرایه ی numbersحلقه می‌زنیم.\nبرای هر آیتم یک المنت <li> برمی‌گردانیم و در نهایت نتیجه‌ی آرایه‌ی المان‌ها را به listItems اختصاص می‌دهیم. :
const numbers = [1, 2, 3, 4, 5];\nconst listItems = numbers.map((number) => <li>{number}</li>);کل آرایه‌ی listItems را درون یک المنت <ul> قرار می‌دهیم و آن را در DOM رندر می‌کنیم:
ReactDOM.render(\n <ul>{listItems}</ul>, document.getElementById('root')\n);این کد یک لیست گلوله‌ای از اعداد بین ۱ تا ۵ را نشان می‌دهد.
\nمعمولا شما لیست‌ها را درون یک کامپوننت رندر خواهید کرد.
\nمی‌توانیم مثال قبلی را طوری بیهنه‌سازی کنیم که یک کامپوننت آرایه ی numbers را بگیرد و لیستی از المنت‌ها را باز گرداند.
function NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((number) => <li>{number}</li> ); return (\n <ul>{listItems}</ul> );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n <NumberList numbers={numbers} />, document.getElementById('root')\n);وقتی این کد را اجرا کنید، با این هشدار مواجه می‌شوید که برای آیتم‌های لیست یک key لازم است. “key” یک ویژگی خاص از جنس رشته است که وقتی لیستی از المنت‌ها درست می‌کنید، باید از آن استفاده کنید. در بخش بعدی دلیل اهمیت آن را توضیح می‌دهیم.
\nبیاید به آیتم‌های لیست خود در numbers.map()، یک key اختصاص دهیم و مشکل نبودن این key را حل کنیم.
function NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((number) =>\n <li key={number.toString()}> {number}\n </li>\n );\n return (\n <ul>{listItems}</ul>\n );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n <NumberList numbers={numbers} />,\n document.getElementById('root')\n);کلیدها در ری‌اکت به شناسایی این که کدام آیتم‌ها تغییر کرده‌اند، اضافه و یا حذف شده اند کمک میکند. کلیدها باید به المنت‌های داخل آرایه داده شوند تا به المنت‌ها یک شناسه ی ثابت بدهند.
\nconst numbers = [1, 2, 3, 4, 5];\nconst listItems = numbers.map((number) =>\n <li key={number.toString()}> {number}\n </li>\n);بهترین راه برای انتخاب یک کلید، استفاده از یک رشته است که یک مورد از لیست را میان برادرانش متمایز میکند. اغلب شما از IDهای داده خود به عنوان کلید استفاده خواهید کرد.
\nconst todoItems = todos.map((todo) =>\n <li key={todo.id}> {todo.text}\n </li>\n);زمانی که برای آیتم‌های رندر شده یک شناسه ثابت نداشته‌باشید، شما می‌توانید به عنوان آخرین راه چاره از index آیتم به عنوان کلید استفاده کنید:
\nconst todoItems = todos.map((todo, index) =>\n // Only do this if items have no stable IDs // فقط زمانی این کار را انجام دهید که آیتم ها شناسه ی پایداری ندارند <li key={index}>\n {todo.text}\n </li>\n);اگر ممکن است ترتیب آیتم‌ها تغییر کند، پیشنهاد نمی‌کنیم که برای کلیدها از شاخص استفاده کنید. زیرا ممکن است تاثیر منفی‌ای بر عملکرد بگذارد و حتی باعث ایجاد مشکلاتی در state کامپوننت شود.\nمقاله رابین پوکرنی (Robin Pokorny) که توضیحی مفصل در مورد تاثیر منفی استفاده از شاخص به عنوان یک کلید است را بخوانید.
\nاگر علاقه‌مندید بیشتر بدانید مقاله ی توضیح مفصل در مورد اینکه چرا کلید ضروری است را بخوانید.
\nاستفاده از keyها زمانی معنی می‌دهد که [کد] در یک آرایه احاطه شده‌باشد.
\nبرای مثال اگر یک تکه از کد را به عنوان کامپوننت ListItem جدا کنید، باید کلید را روی کامپوننت‌های <listitem />قرار دهید، نه روی المنت <li> که درون خود ListItem است.
مثال: استفاده‌ی اشتباه از کلید
\nfunction ListItem(props) {\n const value = props.value;\n return (\n // اشتباه! اینجا احتیاجی به مشخص کردن کلید نیست: <li key={value.toString()}> {value}\n </li>\n );\n}\n\nfunction NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((number) =>\n // اشتباه! اینجا باید کلید مشخص میشد: <ListItem value={number} /> );\n return (\n <ul>\n {listItems}\n </ul>\n );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n <NumberList numbers={numbers} />,\n document.getElementById('root')\n);مثال: استفاده‌ی صحیح از کلید
\nfunction ListItem(props) { \n // صحیح!اینجا احتیاجی به مشخص کردن کلید نیست: return <li>{props.value}</li>;}\n\nfunction NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((number) =>\n // Correct! Key should be specified inside the array. <ListItem key={number.toString()} value={number} /> );\n return (\n <ul>\n {listItems}\n </ul>\n );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n <NumberList numbers={numbers} />,\n document.getElementById('root')\n);یک قاعده خوب این است که المنت‌های داخل فراخوانیmap() نیاز به کلید دارند.
کلید‌هایی که در آرایه‌ها استفاده می‌شوند باید در میان فرزندانشان یکتا باشند.\nاگرچه احتیاجی نیست که به صورت عمومی یکتا باشند.\nوقتی دو نوع آرایه مختلف تولید می‌کنیم می‌توانیم از کلید‌های یکسان استفاده کنیم:
\nfunction Blog(props) {\n const sidebar = ( <ul>\n {props.posts.map((post) =>\n <li key={post.id}> {post.title}\n </li>\n )}\n </ul>\n );\n const content = props.posts.map((post) => <div key={post.id}> <h3>{post.title}</h3>\n <p>{post.content}</p>\n </div>\n );\n return (\n <div>\n {sidebar} <hr />\n {content} </div>\n );\n}\n\nconst posts = [\n {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},\n {id: 2, title: 'Installation', content: 'You can install React from npm.'}\n];\nReactDOM.render(\n <Blog posts={posts} />,\n document.getElementById('root')\n);ری‌اکت از keyها به عنوان یک راهنما استفاده میکند، اما به کامپوننت‌های شما داده نمی‌شوند.\nاگر به همان کلید در کامپوننت خود احتیاج دارید، به صورت آشکار آن‌را به عنوان یک prop با یک نام متفاوت پاس دهید.
\nconst content = posts.map((post) =>\n <Post\n key={post.id} id={post.id} title={post.title} />\n);در مثال بالا، کامپوننت Post می‌تواند props.id را بخواند، اما props.key را نه.
در مثال بالا، ما متغیر listItems را جداگانه تعریف کردیم و آن‌را در JSX قرار دادیم:
function NumberList(props) {\n const numbers = props.numbers;\n const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return (\n <ul>\n {listItems}\n </ul>\n );\n}JSX اجازه استفاده توکار هر expression را در آکولادها می‌دهد بنابراین می‌توان نتیجه map() را درخط (inline) نوشت:
function NumberList(props) {\n const numbers = props.numbers;\n return (\n <ul>\n {numbers.map((number) => <ListItem key={number.toString()} value={number} /> )} </ul>\n );\n}گاهی اوقات این‌کار باعث واضح‌تر شدن کد میشود، اما این سبک نیز می‌تواند بد استفاده شود. همانند جاوااسکریپت، تصمیم اینکه یک متغیر را برای خوانایی بهتر استخراج کنید یا نه، به شما بستگی دارد. به خاطر داشته باشید که اگر بدنه map() بیش از حد تودرتو شد، ممکن است زمان خوبی باشد که از آن یک کامپوننت استخراج کنید.