Nested List in ReactJs - React Js
App.js:
import React from "react";
import {Table} from 'react-bootstrap'
import './App.css'
function App()
{
const Student=[
{name:"Krishan", email:"krishan@gmail.com", Address:[
{Hn:"10", city:"Noida", Country:"India"},
{Hn:"34", city:"Delhi", Country:"India"},
{Hn:"54", city:"Gurgaon", Country:"India"},
{Hn:"95", city:"Mumbai", Country:"India"} ]},
{name:"Dev", email:"dev@gmail.com", Address:[
{Hn:"10", city:"Noida", Country:"India"},
{Hn:"34", city:"Delhi", Country:"India"},
{Hn:"54", city:"Gurgaon", Country:"India"},
{Hn:"95", city:"Mumbai", Country:"India"} ]},
{name:"Bhavesh", email:"bhavesh@gmail.com", Address:[
{Hn:"10", city:"Noida", Country:"India"},
{Hn:"34", city:"Delhi", Country:"India"},
{Hn:"54", city:"Gurgaon", Country:"India"},
{Hn:"95", city:"Mumbai", Country:"India"} ]},
{name:"Brijesh", email:"brijesh@gmail.com", Address:[
{Hn:"10", city:"Noida", Country:"India"},
{Hn:"34", city:"Delhi", Country:"India"},
{Hn:"54", city:"Gurgaon", Country:"India"},
{Hn:"95", city:"Mumbai", Country:"India"} ]}
];
return(
<div className="App">
<h1>Handle Array with List</h1>
<Table striped>
<tbody>
<tr>
<td>S.N</td>
<td>Name</td>
<td>Email</td>
<td>Address</td>
</tr>
</tbody>
{
Student.map((item, i)=>
<tr key={i}>
<td>{i+1}</td>
<td>{item.name}</td>
<td>{item.email}</td>
<td>
<Table>
<tbody>
{item.Address.map((data, j)=>
<tr key={j}>
<td>{j+1}</td>
<td>{data.Hn}</td>
<td>{data.city}</td>
<td>{data.Country}</td>
</tr>
)}
</tbody>
</Table>
</td>
</tr>
)
}
</Table>
</div>
)
}
export default App;
Comments
Post a Comment