Rendering Lists

Rendering an array of objects is a very common pattern.

Consider this array of dogs

const goodest = [
  { name: 'Tonto' },
  { name: 'Sailor' },
  { name: 'Scout' },
  { name: 'Odin' },
  { name: 'Poppy' },
  { name: 'Peggy' }
];

and this Component to render a single dog.

const Doggo = ({ dog }) => {
  return <h1>{dog.name}</h1>;
};

You can manually render each component like so

<Doggo dog={goodest[0]} />
<Doggo dog={goodest[1]} />

or you can loop/map over the goodest array and render as many Doggo components as needed.

const DoggoList = goodest.map((dog) => <Doggo dog={dog} />);

JSX knows how to render an array so you can just output DoggoList (an array of Doggo components) by putting the variable name in between curly braces:

<div>
  {DoggoList}
</div>

Alternatively (and more commonly), you could render the result of the .map operation inline

<div>
  {goodest.map((dog) => <Doggo dog={dog} />)}
</div>

The key Prop

If you open the Dev Tools console, you will find a warning

When you render an array of components, React expects each component in that array to have a key prop so that it can keep track of each component internally.

Add a key prop to each Doggo you want to render. Most datasets will have a unique id for each item, goodest doesn't so just use the name property instead.

{goodest.map((dog) => <Doggo key={dog.name} dog={dog} />)}

You should now see keys for each Doggo component in the React Dev Tools