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.
