React Списки

У React ви будете відтворювати списки за допомогою певного типу циклу.

Метод масиву JavaScript map() зазвичай є кращим методом.

function Car(props) {
return <li>Я є { props.brand }</li>;
}

function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
  <h1>Хто живе в моєму гаражі?</h1>
  <ul>
    {cars.map((car) => <Car brand={car} />)}
  </ul>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Якщо ви запустите цей код у своєму create-react-app, він працюватиме, але ви отримаєте попередження про відсутність "ключа" для елементів списку.

Ключі

Ключі дозволяють React відстежувати елементи. Таким чином, якщо елемент оновлено або видалено, буде повторно відображено лише цей елемент, а не весь список.

Ключі мають бути унікальними для кожного родича. Але їх можна дублювати глобально.

function Car(props) {
return <li>Я є { props.brand }</li>;
}

function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
  <h1>Хто живе в моєму гаражі?</h1>
  <ul>
    {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
  </ul>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

function GroceryList() {
const items = [
{id: 1, name: 'bread'},
{id: 2, name: 'milk'},
{id: 3, name: 'eggs'}
];

return (
<>
  <h1>Grocery List</h1>
  <ul>
    {items.map((item) => <li ={item.id}>{item.name}</li>)}
  </ul>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<GroceryList />);