Introduction: Rendering Arrays in React

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>);
}

The output will look like this:

• 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>
  );
}

However, when you look in the console, you'll see a warning that each child in an array or iterator should have a unique key.

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>
  );
}

This results in a serious error in the console.

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>
  );
}

The rendered code only includes the <li> elements, and the React.Fragment component is not visible in the code.

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>
    </>
  );
}

In this article, you've explored various examples of how to render arrays in a React application. When rendering an element within another component, make sure to use a unique key and wrap your elements in a wrapper element. Depending on your use case, you can render simple lists in a Fragment component, which doesn't require a key - Mastering Arrays Rendering in React: A Comprehensive Guide