Joseph Jude

Rendering an array of data with React.js

2018.03.26 / code / react /

Learn how to loop array of data in 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.


Share this post on

Twitter | | |
Sign up for my weekly newsletter

I will send blog updates to this email. You can unsubscribe at any time using the link in those emails.