Blog Details

img
Data Science

What are Lists In ReactJS

Spoke Right / 14 Nov, 2023

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 
  • {cities}
  • ; }); ReactDOM.render(
    • {names}
    , 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) =>  
  • {cities}
  • ); return (
    • {names}
    ); } const cities = ['Jaipur', 'Jodhpur', 'Udaipur', 'Pune', 'Chandigarh']; ReactDOM.render( , document.getElementById('app') ); export default App;

0 comments

Warning: PHP Startup: Unable to load dynamic library 'imagick.so' (tried: /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so: cannot open shared object file: No such file or directory), /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so: cannot open shared object file: No such file or directory)) in Unknown on line 0