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

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

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>

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>

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>

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.

¹⁾