React basics: Looping a list


How to loop over an array in React

13 Oct, 2021 · 2 min read

In today’s article for React basics, we’ll enhance our first ever React components with a list.

Yesterday we made some static book components like so:

<Book title='Laravel collections' />
<Book title='Ruby for beginners' />
<Book title='CSS is awesome' />

However, that quickly becomes a struggle to maintain. So let’s look at how we could dynamically load these books from a list.

Creating a list in React

Open up your App.js and add a list like so above your app declaration.

const books = [
    id: 1,
    title: 'Laravel collections',
    id: 2,
    title: 'Ruby for beginners',
    id: 3,
    title: 'CSS is awesome',

function App() {}

We can leverage the’ map’ function to render these elements in our React app.

  { => (
    <Book title={book.title} />

And this little piece of code will do the same thing as before.

Keys in React

However, I made one big mistake in the example above. When we render list items in React as we do above, we should always set a key property. This key will help React identify which items change or should be removed.

To add the key, we can use the following code.

<Book title={book.title} key={} />

However, sometimes we do not have a key, so what do we do then?

Well, no worries, React comes with a built-in index we can use as the key.

const numbers = [1, 2, 3];

{, index) => <span key={index}>Number: {number}</span>);

As you can see, the index is available on the map function as the unique key for each element.

You can find this code on GitHub. I hope you enjoyed this article about loops in React.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Conditional wrapping in React

11 Dec, 2022 · 4 min read

Conditional wrapping in React

Have you tried React classnames?

26 Oct, 2022 · 2 min read

Have you tried React classnames?

Join 2099 devs and subscribe to my newsletter