How to show the list using map function? | Listing With Map Function

 We will see how to show the list using map function.

We will take one constructor and call a super function. We use super functions to call the parent constructor.

Now, we will make a state. Within the state, we will make a list and then an array in the list.

 constructor()

  {

  super();

    this.state={

      list:[

        {Name: 'Anand',Phone:'12345', Email:'anand@gmail.com'},

        {Name: 'Balaji',Phone:'12545', Email:'balaji@gmail.com'},

        {Name: 'Retansh',Phone:'23345', Email:'retansh@gmail.com'}

      ]

    }

  }

Now, we make a map function. In React Js, the map function are used for traversing and displaying the list of similar objects of a component. In other words, it is a javascript function and used to call an array.

 this.state.list.map((item)=>

          <div>

          <span>{item.Name}</span>

          <span>{item.Phone}</span>

          <span>{item.Email}</span>

          </div>

Here, we have the full code for map function in ReactJS example.

import logo from './logo.svg';

import React from 'react';

import './App.css';

class App extends React.Component {

  constructor()

  {

  super();

    this.state={

      list:[

        {Name: 'Anand',Phone:'12345', Email:'anand@gmail.com'},

        {Name: 'Balaji',Phone:'12545', Email:'balaji@gmail.com'},

        {Name: 'Retansh',Phone:'23345', Email:'retansh@gmail.com'}

      ]

    }

  }

  render()

  {

  return (

    <div className="App">

      <h1>

        Listing with Map

        </h1>

        {

          this.state.list.map((item)=>

          <div>

          <span>{item.Name}</span>

          <span>{item.Phone}</span>

          <span>{item.Email}</span>

          </div>

          )

        }

     

    </div>

  );

}

}

export default App;

This code explains you how to use react list map in ReactJS.