Displaying items in React

react basics

Introduction to displaying array of items in React

Introduction

Displaying arrays is a common exercise in React. You can be building a table, a list of users or just about anything else.

This article will help you understand how to do so in React.

Array of Strings

You can directly render arrays of a React children type.

Editable React Code
const cityListString = ["Paris", "Madrid", "Lisboa"];

const CityList = () => <div>{cityListString}</div>;



render(<CityList />);
Result

What you need to understand here is how React will render every elements of the array as if they were one after the other.

Array of Components

You can also directly render arrays of JSX elements (HTML Nodes or React Components):

Editable React Code
const MyCustomComponent = ({ children }) => <code>{children}</code>;



const cityComponentList = [

  <strong>Paris</strong>,

  <strong>Madrid</strong>,

  <MyCustomComponent>Lisboa</MyCustomComponent>,

];

const CityList = () => <div>{cityComponentList}</div>;



render(<CityList />);
Result

Here is another way to picture what is going on, let's look at CityList:

const CityList = () => <div>{cityComponentList}</div>;

Step 1

cityComponentList will be evaluated and CityList will become:

const CityList = () => (
  <div>
    <strong>Paris</strong>
    <strong>Madrid</strong>
    <MyCustomComponent>Lisboa</MyCustomComponent>
  </div>
);

Step 2

MyCustomComponent Will be evaluated so CityList becomes:

const CityList = () => (
  <div>
    <strong>Paris</strong>
    <strong>Madrid</strong>
    <code>Lisboa</code>
  </div>
);

Using .map

Now you should understand that react can render arrays of strings, HTML nodes, React components, and even more.

However this can quickly be limiting:

  • Lots of duplicated code - repeating the <strong> HMTL node. You do not want to manually write it all the time.
  • Does not work if the data is dynamic - what if you get this data from an API?

.map() is the most common Array method you will see in React displays, let's see why.

Let's see what we can do using the .map() method of Arrays.

Use .map() to avoid rewriting HTML

Editable React Code
const cityListString = ["Paris", "Madrid", "Lisboa"];

const CityList = () => (

  <div>

    {cityListString.map((city) => (

      <small>{city}</small>

    ))}

  </div>

);



render(<CityList />);
Result

Magic isnt it? by writing once that we want elements to be wrapped by a <small> HTML node, we wrap all elements.

This works with any React component as well.

Editable React Code
const MyCustomMarkComponent = ({ children }) => <code>{children}</code>;

const cityListString = ["Paris", "Madrid", "Lisboa"];

const CityList = () => (

  <div>

    {cityListString.map((city) => (

      <MyCustomMarkComponent>{city}</MyCustomMarkComponent>

    ))}

  </div>

);



render(<CityList />);
Result

And because map takes a function, you can add any logic you want.

Editable React Code
const MyCustomMarkComponent = ({ children }) => <code>{children}</code>;

const cityListString = ["Paris", "Madrid", "Lisboa"];

const CityList = () => (

  <div>

    {cityListString.map((city) => {

    if (city === 'Lisboa'){

      return <MyCustomMarkComponent>{city}</MyCustomComponent>

    }

      return (<small>{city}</small>

    )})}

  </div>

);



render(<CityList />);
Result

Using filter and any other Array methods

Now that you know that React can render arrays of JSX Elements, you can use just about most of the Array methods.

filter

Displaying all cities BUT Paris using filter():

Editable React Code
const MyCustomMarkComponent = ({ children }) => <code>{children}</code>;

const cityListString = ["Paris", "Madrid", "Lisboa"];

const CityList = () => (

  <div>{cityListString.filter((city) => city !== "Paris")}</div>

);



render(<CityList />);
Result

Combining filter and maps

Displaying all cities BUT Paris and wrapped by <small/> using .filter() and .map() :

Editable React Code
const MyCustomMarkComponent = ({ children }) => <code>{children}</code>;

const cityListString = ["Paris", "Madrid", "Lisboa"];

const CityList = () => (

  <div>

    {cityListString

      .filter((city) => city !== "Paris")

      .map((city) => (

        <small>{city}</small>

      ))}

  </div>

);



render(<CityList />);
Result

Feel free to combine Array methods and have fun with them!