CodesJava

Easy learning with example program codes

Lists in ReactJS

React Lists
To display data in an ordered format, lists are used in React JS, much similar to the lists in JavaScript. In ReactJs, the map() function is used for traversing the lists.

Example:

import React from 'react';   
import ReactDOM from 'react-dom';   
const cities = ['Jaipur', 'Jodhpur', 'Udaipur', 'Pune', 'Chandigarh'];   
const names = cities.map((cities)=>{   
return <li>{cities}</li>;   
});   
ReactDOM.render(   
<ul> {names} </ul>,   
document.getElementById('app')   
);   
export default App;

Output:

      ●	Jaipur
      ●	Jodhpur
      ●	Udaipur
      ●	Pune
      ●	Chandigarh

Rendering Lists inside components Example:

import React from 'react';   
import ReactDOM from 'react-dom';   
function CityList(props) {  
const cities = props.cities;  
const names = cities.map((cities) =>  
<li>{cities}</li>  
);  
return (  
<div>  
<ul>{names}</ul>  
</div>  
);  
}  
const cities = ['Jaipur', 'Jodhpur', 'Udaipur', 'Pune', 'Chandigarh'];      
ReactDOM.render(  
<CityList cities={cities} />,  
document.getElementById('app')  
);  
export default App;

Output:

      ●	Jaipur
      ●	Jodhpur
      ●	Udaipur
      ●	Pune
      ●	Chandigarh
Please follow and like us:
error









Copyright © 2019 CodesJava DMCA.com Protection Status