How to render an Array in React

January 28, 2020

Let’s say you have an array like this:

const cars = ["BMW", "Mercedes", "Audi", "Volkswagen", "Ferrari"];

Let’s say you want to render those names in a list.

A typical solution to this problem would look like this:

const cars = ["BMW", "Mercedes", "Audi", "Volkswagen", "Ferrari"];

function App() {
  return (
    <ul>
      {cars.map(car => (
        <li key={car}>Car: {car}</li>
      ))}
    </ul>
  );
}

You just have to remember that you need to provide a unique key to each child.

For more information check out the React Documentation on this specific issue.