React Lists

Rendering lists in React.

React Lists

In React, you will render lists with some type of loop.

The JavaScript map() array method is generally the preferred method.

Keys allow React to keep track of elements. This way, if an item is updated or removed, only that item will be re-rendered instead of the entire list.

Example

const cars = ['Ford', 'BMW', 'Audi'];
const listItems = cars.map((car) => <li>{car}</li>);

return <ul>{listItems}</ul>;