How do I style each item in a array when using .map

Question

I am using .map to go through data inside of an array. And I want to style each "bundle of data" seperately. I have multiple sections (Appetizers, Lunch, etc) each section has its own items. How can I seperate each menu item into its own box.

import data from "../data";

import "./Food.css"

const Food = () => {

return (
    <div> <h2 class ="AppHead">Appetizers</h2>
    
    <div class = 'box'>
        {data.appetizers.map((food) => {
                return (

                    <div>                        
                    <div class ="">{food.name}</div>
                    {food.price}
                    {food.description}
                    {Math.floor(Math.random() * 10000)}
                    </div>
                )
        })}
    </div> </div>
);
    };

export default Food;

This is what I want to recreate This is the code

I want to recreate that image with CSS.

Answer 1

<div className='item'>                        
                <div className ="">{food.name}</div>
                {food.price}
                {food.description}
                {Math.floor(Math.random() * 10000)}
</div>

then do whatever styling you want in your css file and it should apply to each rendered menu Item. I think that is what you want to achieve.