const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>   <li>{number}</li> ); 

Мы включаем весь массив "listItems" в элемент

<ul>

и выносим его в DOM:

ReactDOM.render(   <ul>{listItems}</ul>,   document.getElementById('root') ); 

Попробуйте на CodePen.
Этот код выводит маркированный список чисел между 1 и 5.

Базовый список компонентов

Как правило, вы генерируйте списки внутри компонента.

Мы можем перепроектировать предыдущий пример в компонент, который принимает массив «numbers» и выводит неупорядоченный список элементов.

function NumberList(props) {   const numbers = props.numbers;   const listItems = numbers.map((number) =>     <li>{number}</li>   );   return (     <ul>{listItems}</ul>   ); }  const numbers = [1, 2, 3, 4, 5]; ReactDOM.render(   <NumberList numbers={numbers} />,   document.getElementById('root') ); 

При выполнении этого кода всплывет предупреждение о том, что для элементов списка требуется ключ. «Key» — это специальный строковый атрибут, который нужно включить при создании списков элементов. В следующем разделе мы расскажем, почему он так важен.
Зададим «key» нашему списку элементов внутри «numbers.map ()».

function NumberList(props) {   const numbers = props.numbers;   const listItems = numbers.map((number) =>     <li key={number.toString()}>       {number}     </li>   );   return (     <ul>{listItems}</ul>   ); }  const numbers = [1, 2, 3, 4, 5]; ReactDOM.render(   <NumberList numbers={numbers} />,   document.getElementById('root') ); 

Попробуйте на CodePen.

Ключи (Keys)

Ключи помогают React определить, какие элементы были изменены, добавлены или удалены. Элементы внутри массива должны быть обеспечены ключами, чтобы иметь стабильную идентичность:

const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>   <li key={number.toString()}>     {number}   </li> ); 

Лучший способ подобрать ключ — использовать строку, которая однозначно идентифицирует элемент списка среди остальных. Чаще всего, в качестве ключей вы будете использовать идентификаторы (ID) из ваших данных:

const todoItems = todos.map((todo) =>   <li key={todo.id}>     {todo.text}   </li> ); 

Если у вас нет стабильных идентификаторов (ID) для генерированных элементов, в крайнем случае, в качестве ключа вы можете использовать индекс (index) элемента:

const todoItems = todos.map((todo, index) =>   // Only do this if items have no stable IDs   <li key={index}>     {todo.text}   </li> ); 

Мы не рекомендуем использовать индексы для ключей в случае если элементы могут изменить порядок, так как это будет происходить медленно.

Извлечение компонентов при помощи ключей

Ключи имеют смысл только в контексте окружающего массива.

Например, если вы извлекаете компонент «ListItem», сохраните ключ для элементов
"<ListItem />" в массиве устройств, а не для корневого элемента

<li>

в самом компоненте «ListItem».

Пример: неправильное использование ключа

function ListItem(props) {   const value = props.value;   return (     // Wrong! There is no need to specify the key here:     <li key={value.toString()}>       {value}     </li>   ); }  function NumberList(props) {   const numbers = props.numbers;   const listItems = numbers.map((number) =>     // Wrong! The key should have been specified here:     <ListItem value={number} />   );   return (     <ul>       {listItems}     </ul>   ); }  const numbers = [1, 2, 3, 4, 5]; ReactDOM.render(   <NumberList numbers={numbers} />,   document.getElementById('root') ); 

Пример: правильное использование ключа

function ListItem(props) {   // Correct! There is no need to specify the key here:   return <li>{props.value}</li>; }  function NumberList(props) {   const numbers = props.numbers;   const listItems = numbers.map((number) =>     // Correct! Key should be specified inside the array.     <ListItem key={number.toString()}               value={number} />   );   return (     <ul>       {listItems}     </ul>   ); }  const numbers = [1, 2, 3, 4, 5]; ReactDOM.render(   <NumberList numbers={numbers} />,   document.getElementById('root') ); 

Попробуйте на CodePen.
Практическое правило состоит в том, что элементы внутри запроса «map()» требуют ключи.

Каждый ключ должен быть уникальным и не похожим на остальных

Ключи, используемые в массивах устройств должны быть уникальными среди своих братьев. Тем не менее, они не должны быть абсолютно уникальным. Можно использовать одни и те же ключи, при создании двух разных массивов:

function Blog(props) {   const sidebar = (     <ul>       {props.posts.map((post) =>         <li key={post.id}>           {post.title}         </li>       )}     </ul>   );   const content = props.posts.map((post) =>     <div key={post.id}>       <h3>{post.title}</h3>       <p>{post.content}</p>     </div>   );   return (     <div>       {sidebar}       <hr />       {content}     </div>   ); }  const posts = [   {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},   {id: 2, title: 'Installation', content: 'You can install React from npm.'} ]; ReactDOM.render(   <Blog posts={posts} />,   document.getElementById('root') ); 

Попробуйте на CodePen.

Для React ключи служат в качестве подсказки, но они не передаются вашим компонентам. Если вам нужно одно и то же значение в компоненте, предоставьте его непосредственно в качестве опоры с другим именем:

const content = posts.map((post) =>   <Post     key={post.id}     id={post.id}     title={post.title} /> ); 

В приведенном выше примере, компонент «Post» может прочитать «props.id», но не «props.key».

Встраивание " map()" в JSX

В приведенных выше примерах мы заявили, что отдельный компонент «listItems» является  переменной и включили его в JSX:

function NumberList(props) {   const numbers = props.numbers;   const listItems = numbers.map((number) =>     <ListItem key={number.toString()}               value={number} />   );   return (     <ul>       {listItems}     </ul>   ); } 

JSX позволяет встраивать любые выражения в фигурных скобках, поэтому мы могли встроить результат «map()»:

function NumberList(props) {   const numbers = props.numbers;   return (     <ul>       {numbers.map((number) =>         <ListItem key={number.toString()}                   value={number} />       )}     </ul>   ); } 

Попробуйте на CodePen.