Как правильно рендерить списки в React

Допустим, у нас есть массив записей, которые мы получили по API, и их нужно отобразить на странице.

Как же сделать это так, как принято в React?

Не по реакту

Если не быть знакомым с функциональным программированием, возникнет желание решить задачу созданием нового массива:

function NonIdiomaticList(props) {
  // Построение массива записей
  const array = [];
  for(let i = 0; i < props.items.length; i++) {
    array.push(
      <Item key={i} item={props.items[i]} />
    );
  }

  // Рендер
  return (
    <div>
      {array}
    </div>
  );
}

Это работает, но решение не выглядит красивым и занимает больше строк, чем требует.

По реакту

Этот компонент использует встроенную в класс Array функцию map для создания массива с тем же количеством элементов, вызывая при этом вашу функцию. 

function IdiomaticReactList(props) {
  return (
    <div>
      {props.items.map((item, index) => (
        <Item key={index} item={item} />
      )}
    </div>
  );
}

Пара слов о key

Обратите внимание, что при вызове компонента Item я использовал проп key, куда передавал переменную index. Наверное, это не лучшая идея, гораздо правильнее передавать в key уникальный идентификатор записи.

React полагается на key для идентификации элементов в списке, потому что React использует Virtual DOM и перерисовывает только те компоненты, которые были изменены с момента последней отрисовки.