Code Playground.

In this composition, We'll see how to display a simple table, listing with Array of Objects and nesting list inReact.js. This composition is substantially concentrated for inventors who have started working onReact.js. 

Simple Reactjs List with Simple Array 

Then, I'm going to show how to display data of simple array having list of countries in it. we will use. chart to render the item in the template. 

import React from "react";
function App() {
	const Countries = [
		{ counrtyName: "USA" },
		{ counrtyName: "India" },
		{ counrtyName: "Australia" },
		{ counrtyName: "Spain" },
		{ counrtyName: "France" },
		{ counrtyName: "Japan" }
	];
	return (
		<ul>
			{Countries.map((data) => (
				<li>{data.counrtyName}</li>
			))}
		</ul>
	);
}
export default App;

When you run the below law, you ’ll be given a warning that a key should be handed for list particulars. A “ key ” is a special string attribute you need to include when creating lists of rudiments. Let; s have a look at the law below.

import React from "react";
function App() {
	const Countries = [
		{ counrtyName: "USA" },
		{ counrtyName: "India" },
		{ counrtyName: "Australia" },
		{ counrtyName: "Spain" },
		{ counrtyName: "France" },
		{ counrtyName: "Japan" }
	];
	 
	return (
		<div>
			<ul>
				{Countries.map((data, index) => (
					<li key={index}>{data.counrtyName}</li>
				))}
			</ul>
		</div>
	);
}
export default App;

still, also that's stylish to use because that will help to do edit, cancel, If you have unique id crucial availalbe in the array. 

Display Array of Object List in React 

To display array of object is also as simple as above we did. We've used the same. chart system to get individual item and placed the individual value with the same way we do for accesing object item( using. driver). Let's have a look on below law.

import React from "react";
function App() {
  const Users = [
    {
      id: "01",
      name: "Leanne",
      email: "Sincere@xyz.com",
      zipcode: 12112
    },
    {
      id: "02",
      name: "Ervin",
      email: "Shanna@xyz.com",
      zipcode: 12111
    }
  ];
   
  return (
    <ul>
      {Users.map((data) => (
        <li key={data.id}>
         <p>{data.name}</p>
          <p>{data.email}</p>
          <p>{data.zipcode}</p>
          </li>
      ))}
    </ul>
  );
}
 
export default App;

Display Nested Lists in React 

occasionally we demanded to show data in nested form. Then, we will how to display data in nested way.

import React from 'react';

function App() {
    const users = [{
            id: "01",
            name: "Leanne Graham",
            email: "Sincere@april.biz",
            zipcode: 12112
        },
        {
            id: "02",
            name: "Ervin Howell",
            email: "Shanna@melissa.tv",
            zipcode: 12111
        }
    ];

    const finalArray = [users, users];

    return ( <
        div >
        <
        ul > {
            finalArray.map((nestedItem, i) => ( <
                ul key = {
                    i
                } >
                <
                h3 > List {
                    i
                } < /h3> {
                    nestedItem.map(data => ( <
                        li key = {
                            data.id
                        } >
                        <
                        div > {
                            data.name
                        } < /div> <
                        div > {
                            data.email
                        } < /div> <
                        div > {
                            data.zipcode
                        } < /div> <
                        /li>
                    ))
                } <
                /ul>
            ))
        } <
        /ul> <
        /div>
    );
}

export default App;

Conclusion 

In this composition, We learn about How to Display List in Reactjs Example 

I hope this composition helped you to get the introductory idea of displaying data inReact.js operation.