Prudent Devs

Rendering an array of data with React.js

Learn how to loop array of data in React.

#code , #react

Looping array of data is common in building web-applications. In this article, let me show you how to loop through such an array and display the details in a React.js application.

Loops in React.js

In this tutorial, we will loop through a hard-coded array to display countries and capitals. The array looks like this:

const countries = [
  { name: "India", capital: "Delhi" },
  { name: "Belgium", capital: "Brussels" },
  { name: "France", capital: "Paris" },
  { name: "Greece", capital: "Athens" }
]

Let us start with creating a React app.

For this we will use the standard create-react-app command. In your terminal issue this command: npx create-react-app display-array. This will create a new react app in a folder display-array. You can go into the folder and start the development server with npm start. It will start the server and open the application in the default browser.

create-react-app will create a folder structure like this:

.
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

We will create two components — a header component to display tittle and a list component to loop through the array and display the country and its capital.

Create a new folder named components. Within it create a file Header.js. This component will only display a h1 tag. So we will create this as a stateless functional component.

import React from "react";

const Header = () => (
  <div>
    <h1>Countries and Capitals</h1>
  </div>
);

export default Header;

Now let us create another component, List.js, which will use the hard-coded array of countries and their capitals. Since this has to use a component variable, this will be a full component (i.e: a class). The code looks like this:

import React from "react";

class List extends React.Component {
  render() {
    let countries = [
      { name: "India", capital: "Delhi" },
      { name: "Belgium", capital: "Brussels" },
      { name: "France", capital: "Paris" },
      { name: "Greece", capital: "Athens" }
    ];

    return (
      <ul>
        {countries.map(country => (
          <li>
            Capital of {country.name} is {country.capital};
          </li>
        ))}
      </ul>
    );
  }
}

export default List;

Now we need to wire these two components with the app component. To do that, import the components and invoke them as shown in the below code:

import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <List />
      </div>
    );
  }
}

export default App;

If you have the development server running, the app will automatically update itself. Otherwise, you can see the result by starting the development server with the command npm start.