Question 173956 in CSS Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    Here is a simple example of how you can accomplish this. You can have your parent data that will look something like this:

    const data = {
  appetizers: [
    {
      id: 1,
      title: 'Fries',
      price: 2.99,
    },
    {
      id: 2,
      title: 'Mozzarella Sticks',
      price: 4.99,
    },
    {
      id: 3,
      title: 'Chicken Wings',
      price: 6.99,
    },
    {
      id: 4,
      title: 'Nachos',
      price: 5.99,
    },
    {
      id: 5,
      title: 'Spinach Artichoke Dip',
      price: 7.99,
    },
    {
      id: 6,
      title: 'Bruschetta',
      price: 3.99,
    },
  ],
  drinks: [
    {
      id: 1,
      title: 'Coke',
      price: 1.99,
    },
    // Add more drinks here
  ],
  // Add more subgroups here
};

    Ideally I would recommend making each section their own component. So you could have an Appetizers component where you would pass data.appetizers as a prop where you can then display the data with whatever styling you want. Then do the same for Lunch, Dinner, etc.

    That would look something like:

        <Appetizers apps={data.appetizers} />
    <Lunch lunch={data.lunch} />
    <Drinks drinks={data.drinks} />
    Login or Signup to reply.
  2. 0 
    <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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search