React JS List

For showing list from react, array.map is very much useful. for an understanding of array.map you can go to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

We can get more ideas by looking below example. you can put this file in /src/components folder and put in /src/App.js file.

1. List

List
import React from 'react'; function List() { const countries = ['India', 'America', 'Nepal', 'Brazil']; return ( <div> { countries.map((country)=> return <h1>{country}<h1> ) } </div> } } export default List;

In above code, we can get a list of countries in browser. we can achieve these things as per below method also.

Example
function List() { const countries = ['India', 'America', 'Nepal', 'Brazil']; const countryList = countries.map((country)=> <h1>{country}<h1> ); return ( <div> {countryList} </div> } }

Now, we have a object list which we have to show in browser,

Example
function List() { const countries = [ { name : 'India', continent : 'Asia' }, { name : 'Brazil', continent : 'South America' }, { name : 'Nepal', continent : 'Asia' }, { name : 'Maxico', continent : 'North America' } ]; return ( <div> { countries.map((country)=> return <h1>{country.name} is in {country.continent}<h1> ) } </div> } }

In this way, we can show object list in browser, we can also, take '

<h1>{country.name} is in {country.continent}<h1>' in child component and put child component's name in countries.map code. Also, we can use array.map for show data in table format or grid format.

 

← Previous

Next →