UI/UX Design

How to render arrays in React JS

In this tutorial I will show you how to loop through an array and render its elements in the UI.

Overview

Let’s get started by building a simple To-do app which will contain:

  • 1 input field
  • 1 button
  • 1 unordered list

At the end of this tutorial you should be able to type something in the input field and once you press the button, the input value will be pushed in the array and then rendered inside the unordered list.

Install

If you didn’t install the global package for React you can do it by running the following command:

  
  
npm install -g create-react-app
  

 

Now you can use it to create a new app with the following command:

  
  
create-react-app hello-world
  

 

To start the server run:

  
  
npm start
  

 

Your project structure should look something like:

  
  
hello-world/
README.md
index.html
favicon.ico
node_modules/
package.json
src/
  App.css
  App.js
  index.css
  index.js
  logo.svg
  

 

Render method

Open the App.js file and modify the render method to contain an input field and a button.

  
  
render() {
  return (
    <div>
      <input type="text" />
      <button>Add item</button>
    </div>
  );
}
  

 

Constructor method

For this example I will use the local state to store the array and the input value. If you don’t have a constructor method already, create one which will set the default value for the array and the input value.

  
  
constructor(props) {
  super(props);

  this.state = {
    inputValue: '',
    items: [],
  }
}
  

 

onInputChange method

This method will update the state with the new input value every time you type something. This state will be used in the next method where it will be pushed in the array.

  
  
onInputChange(e) {
  this.setState({
    inputValue: e.target.value,
  });
}
  

Now update the input field from the render method to call this method when the input value is changing:

  
  
<input type="text" onChange={ (e) => this.onInputChange(e) } />
  

 

addItem method

This method will push the input value into the array and update the state with the new array.

  
  
addItem() {
  let items = this.state.items;
  items.push(this.state.inputValue);
  this.setState({
    items
  });
}
  

Now update the button from the render method to call the addItem method

  
  
<button onClick={ () => this.addItem() }>Add item</button>
  

 

Rendering the array

While Vue.js has v-for and Angular has ngFor, in React we will use the map javascript function which is very easy to use:

  
  
items.map((val, index) => { console.log(val); });
  

Let’s build the listItems method to render all the elements in the array:

  
  
listItems() {
  let items = this.state.items;
  return (
    <ul>
      {
        items.map((val, index) => {
          return (
            <li key={index}>
              { val }
            </li>
          );
        })
      }
    </ul>
  );
}
  

Now you can call the listItems method anywhere inside the render method where you want the list to appear.

This is how the complete file should look like:

  
  
import React, { Component } from 'react';
  
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      items: [],
    }
  }

  onInputChange(e) {
    this.setState({
      inputValue: e.target.value,
    });
  }

  addItem() {
    let items = this.state.items;
    items.push(this.state.inputValue);
    this.setState({
      items
    });
  }

  listItems() {
    let items = this.state.items;
    return (
      <ul>
        {
          items.map((val, index) => {
            return (
              <li key={index}>
                { val }
              </li>
            );
          })
        }
      </ul>
    );
  }

  render() {
    return (
      <div>
        <input type="text" onChange={ (e) => this.onInputChange(e) } />
        <button onClick={ () => this.addItem() }>Add item</button>
        { this.listItems() }
      </div>
    );
  }
}
  

Add comment