🖥 Работа с коллекциями в JSX

⏩В работе с коллекциями элементов в JSX по большей части нет ничего особенного.
С другой стороны, задача обработки списков элементов настолько частая, что будет не лишним её обсудить отдельно.

⏩На скрине приведён типичный код, в котором коллекция генерируется прямо в том месте, куда и подставляется. Здесь можно снова увидеть, что внутрь JSX через {} вложено выражение, внутри которого опять появляется JSX-код. Как правило, рекурсия на этом заканчивается. Если нужна более сложная обработка, то имеет смысл вынести генерацию коллекции в метод компонента и вызывать его внутри render. Например, ниже выделена функция renderList(), которая формирует список для отрисовки:

class List extends React.Component {
  renderList = (data) => {
    return data.map(item => <li>{item.name}</li>);
  }

  render() {
    const { data } = this.props;

    return (
      <ul>
        {this.renderList(data)}
      </ul>
    );
  }
}

⏩Проп key
Для повышения эффективности, React настоятельно рекомендует идентифицировать каждую генерируемую строку коллекции. Связано это с механизмом, который производит изменения в DOM.
Генерируя коллекцию элементов в JSX, нужно обязательно проставлять уникальный проп key, который не меняется при повторной генерации коллекции.

⏩Чаще всего с этой задачей не возникает проблем, так как у любой сущности, с которой мы работаем, есть свой идентификатор (например, primary key из базы данных).

class List extends React.Component {
  render() {
    const { data } = this.props;

    return (
      <ul>
        {data.map((item) => <li key={item.id}>{item.name}</li>)}
      </ul>
    );
  }
}

const items = [
  { name: 'first', id: 1 },
  { name: 'second', id: 2 }
];

const mountNode = document.getElementById('react-root');
const root = ReactDOM.createRoot(mountNode);
root.render(<List data={items} />);

📎 Читать подробнее

@react_tg