Json Decode in Div MAP Uses In LIST In BootStrap 5 REACTJS

 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;