Div data (name , age) MAP uses in LIST in BootStrap 5 REACTJS

 Div data (name , age) MAP uses in LIST in BootStrap 5  REACTJS

Using-     

            index %2 == 0 ? 'yellow' : 'Green'

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 names = ['Raj', 'Avi', 'Madhu', 'Nisha', 'Raj', 'Avi', 'Madhu', 'Nisha'];

    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'>

                {

                    names.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}</h2>

                                    <h3>Text</h3>

                                </div>

                                <div className=''>

                                    <div style={{ width: '100px', height: "100px", backgroundColor: "red" }}></div>

                                </div>

                            </div>

                            <div className='py-4'>

                                <h2>Text : XXXXX </h2>

                                <h2>XT : XXXXX </h2>

                            </div>

                        </div>

                    ))

                }

            </div>

        </div>

    );

}

export default Feature;