How to render a List of React Elements (Component, )?

About

This page is about Loop in React and Jsx.

Example

Basic Javascript vs React Loop

Example with Pure Javascript

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

where:

map is the Array Map function with an Arrow function as argument

Rendered by WebCode

Example in React

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

<div id="root"></div>

Rendered by WebCode

Advanced React with Key

By adding a key to the element, React can do a quicker reconciliation between two renderings to render only what have changed.

NumberList is a component that accepts an array of numbers and outputs an unordered list of elements with a unique local key attribute

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
        {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

Rendering

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

<div id="root"></div>

Rendered by WebCode

Advanced with Loop in Jsx

Because JSX allows embedding any expressions in curly braces, we could inline the map() result of the previous example.

NumberList with the loop inside Jsx.

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map( (number) => (
        <li key={number.toString()}>{number}</li>
      ))}
    </ul>
  );
}

The Javascript Rendering

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

The root element where to render

<div id="root"></div>

Rendered by WebCode

Why a key

A key is a special string attribute you need to include when creating lists of elements (component,…) to allow a quick reconciliation (diff) between different renderings. They help React identify which items have been changed, added, or removed.

A key value is a string that uniquely identifies a list item among its siblings.

the natural IDs from your object
or the index array as a last resort - Using indexes for keys is not a good idea if the items can be reordered as it would be slow.

Rules:

Keys Must Only Be Unique Among Siblings
Keys used within arrays should be unique among their siblings. However, they don't need to be globally unique.

If you need the same value in your component, pass it explicitly as a prop with a different name.

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

You may read an in-depth explanation about why keys are necessary here.

¹⁾

https://facebook.github.io/react/docs/lists-and-keys.html