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:

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>

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

1)





Discover More
React - Function Component

This page is the writing of a component with the functional syntax In Jsx A UD DOM component defining the Welcome tag A React element using this DOM tag Rendering The standard mandatory...
What is a React Element?

An element is a node in the React tree (React DOM implementation) that has a type and props. component getting started createElementjsx filescreateElement e A counter component with a useState...



Share this page:
Follow us:
Task Runner