Json Decode in Div MAP Uses In LIST In BootStrap 5 REACTJS
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
const Feature = () => {
const navigate = useNavigate();
const handlerSave = () => {
console.log("Next Page");
navigate('/features');
}
const jsonData = [
{
"name": "Raj",
"age": 25,
"city": "New York",
"phone": "+91 5126548932"
},
{
"name": "Avi",
"age": 30,
"city": "San Francisco",
"phone": "+91 5126548932"
},
{
"name": "Madhu",
"age": 28,
"city": "Los Angeles",
"phone": "+91 5126548932"
},
{
"name": "Nisha",
"age": 22,
"city": "Chicago",
"phone": "+91 5126548932"
}
];
return (
<div className="container-fluid border p-2 m-2 rounded-2 ">
<h2 className=''>Features</h2>
{/* Single Div */}
<div className='d-flex flex-wrap gap-2 w-100'>
{
// Json Data using map function
jsonData.map((data, index) => (
<div key={index} className='ps-5 flex-grow-1' style={{
backgroundColor: index % 2 === 0 ? 'yellow' : 'green',
maxWidth: '24%', flexBasis: '24%'
}}>
<div className='d-flex justify-content-between'>
<div className='pt-4'>
<h2>{data.name}</h2>
<h3>{data.city}</h3>
</div>
<div className=''>
<div style={{ width: '100px', height: "100px", backgroundColor: "red" }}></div>
</div>
</div>
<div className='py-4'>
<h2>Age : {data.age}</h2>
<h3 style={{ fontWeight: 'bold' }}>Mobile No :- </h3>
<h2>{data.phone} </h2>
</div>
</div>
))
}
</div>
</div>
);
}
export default Feature;
