Mastering Arrays Rendering in React: A Comprehensive Guide

React offers diverse ways to render arrays and elements within your components. In this article, you will learn how to effectively render arrays in React and apply best practices.

One of the advantages of using a modern web language like JavaScript is the ability to quickly automate the generation of HTML elements. By employing a loop over an array or an object, you only need to write the HTML code for each element once. Better yet, future changes only need to be made once.

Rendering Multiple Elements

To render multiple JSX elements in React, you can iterate through an array using the .map() method and return a single element. Below, you iterate through the “reptiles” array and return a <li> element for each item in the array. You can use this method when you want to display a single element for each item in the array:

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];
  
  return reptiles.map((reptile) => <li>{reptile}</li>);
}

• Alligator
• Snake
• Lizard

Rendering a Collection of Elements Within a Component

In this example, you iterate through an array and create a list of list items, similar to the previous example. First, update the code to use the <ol> element to contain the <li> elements. The <ol> element creates an ordered list of elements:

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];
  
  return (
    <ol>
      {reptiles.map((reptile) => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

The warning appears because when attempting to render a collection within a component, you need to add a key. In React, a unique key is used to determine which of the components in a collection needs to be re-rendered when updating. Adding a unique key prevents React from re-rendering the entire component with each update.

Rendering Adjacent Elements

In JSX, to render more than one element in a component, you need to wrap them in a container. In this example, you initially return a list of elements without iterating through an array:

function ReptileListItems() {
  return (
    <li>Alligator</li>
    <li>Snake</li>
    <li>Lizard</li>
  );
}

To fix this error, you must enclose the block of <li> elements within a wrapper. For a list, you can wrap them in an <ol> or <ul> element:

function ReptileListItems() {
  return (
    <ol>
      <li>Alligator</li>
      <li>Snake</li>
      <li>Lizard</li>
    </ol>
  );
}

Rendering Adjacent Elements with React.Fragment

Before React Version 16.2, you could wrap a group of components in a <div> element. This led to an application filled with <div> elements, often referred to as “div soup.” To address this issue, React introduced a new component called the Fragment component:

function ReptileListItems() {
  return (
    <React.Fragment>
      <li>Alligator</li>
      <li>Snake</li>
      <li>Lizard</li>
    </React.Fragment>
  );
}

Additionally, you don’t need to add a key when using React.Fragment.

You may find that writing React.Fragment is more cumbersome than adding a <div>. Fortunately, the React team has developed a shorter syntax to represent this component. You can use <> </> instead of <React.Fragment></React.Fragment>:

function ReptileListItems() {
  return (
    <>
      <li>Alligator</li>
      <li>Snake</li>
      <li>Lizard</li>
    </>
  );
}