Объекты

Допустим есть объект items:

const items = [
    {name: "JavaScript", id: "1"},
    {name: "ES 5", id: "2"},
    {name: "React", id: "3"}
]

Вывести данный объект в React-приложение можно через метод map().

import { useState } from 'react';

export default function App() {

  const [items, setItems] = useState([
    {name: "JavaScript", id: "1"},
    {name: "ES 5", id: "2"},
    {name: "React", id: "3"}
  ]);

  const list = items.map((item, index) => (
      <li key={item.id}>{item.name}</li>
  ));

  return (
    <ul>{list}</ul>
  );
}

Пример кода на Playcode

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

В качестве значения key рекомендуется указывать id элемента, чтобы не было ошибок вывода элементов, например после смены сортировки. Если данного параметра нет, то можно использовать index.

Значение для key должно быть уникально только в пределах текущего цикла.

В результате при вызова <ListItems> пример выше, будет сгенерирован HTML:

<ul>
    <li>JavaScript</li>
    <li>ES 5</li>
    <li>React</li>
</ul>