React.js: how do i render a particular category of data in a component from an array?

Aman Choudhary 0
Viewed 39

i am building a restaurant website in which i have an array of all the items in their menu, looks like this -

const CardData = [
  {
    index: 1,
    imagesrc: "require(./assets/menu/nonveg)",
    title: "Tandoori Chicken",
    group: "non-veg",
    discprice: 400,
    price: 450,
  },
  {
    index: 2,
    imagesrc: "require(./assets/menu/nonveg)",
    title: "Momos Steamed",
    group: "veg",
    discprice: 80,
    price: 100,
  },
  {
    index: 3,
    imagesrc: "require(./assets/menu/nonveg)",
    title: "Non-Veg Momos Fried",
    group: "non-veg",
    discprice: 100,
    price: 150,
  }]

In a parent component i have different child "menu" components. In each menu component i want to render a different category of data. The parent component looks like-

import React, { useState } from "react";
import CardMenu from "./CardMenu";

const Menu = () => {

  return (
    <div className="group">
      <h1>Our Collection</h1>
      <CardMenu/>
      <CardMenu/>
      <CardMenu/>
    </div>
  );
};

export default Menu;

and the child component looks like - '''

import Tag from "./Tag";
import { useState } from "react";

const CardMenu = ({ menudata }) => {
  return (
    <>
      <div className="menu">
        <Tag />
        <div className="scroll-menu">
          {
            menudata.map((curElem) => {
              const { index, title, group, imagesrc, price, disprice } = curElem;
              return (
                <>
 <div className="card" key={index}>
                    <div className="card-upper">
                      <div className="card-image">
                        <img
                          src={require("../assets/Duggarhutz/nonveg/nonvegfriedmomos.jpeg")}
                          alt=""
                        />
                      </div>
                      <div className="card-info">{index}</div>
                    </div>
                    <div className="card-mid">
                      <div className="card-title">{title}</div>
                      <div className="card-icons"></div>
                      <div className="card-desc">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Aliquam, vero. Provident nesciunt magni aliquid omnis eveniet
                        architecto optio reprehenderit at itaque aut?
                      </div>
                    </div>
                    <div className="card-bottom">
                      <div className="card-price">${price}</div>
                      <div className="card-descprice">${disprice}</div>
                      <div className="card-button">
                        <button>Order</button>
                      </div>
                    </div>
                  </div>
                </>
              )
            })
          }
        </div>
      </div>
    </>
  )
};

export default CardMenu;

---for each group i want to render a new Cardmenu with cards related to it.---

reactjs javascript
4 Answers

Pass in the cardData to your cardMenu like this <CardMenu cardData /> Or <CardMenu cardData=cardData />

risky last0

As you are destructuring the props in CardMenu with a property menudata you need to pass a property with the same name as this:

const Menu = () => {

  return (
    <div className="group">
      <h1>Our Collection</h1>
      <CardMenu menudata={CardData}/>
    </div>
  );
};
Girgetto0

i write your solution and give a suggestion to this situation:
solution- filter data from js methods:

const data = [
    {
      categoryName: "Banking",
      categoryId: "B1",
      description: "Financial sector"
    },
    {
      categoryName: "Retail",
      categoryId: "R1",
      description: "Retail and customer experience"
    }
];

function groupByProperty(arrayOfObjects, property) {
  return arrayOfObjects.reduce((acc, curr) => {
    const key = curr[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(curr);
    return acc;
  }, {});
}

const dataByCategoryName = groupByProperty(data, "categoryName");
console.log(dataByCategoryName);

/* Output
{
    Banking: [{
        categoryId: "B1",
        categoryName: "Banking",
        description: "Financial sector"
    }],
    Retail: [{
        categoryId: "R1",
        categoryName: "Retail",
        description: "Retail and customer experience"
    }]
}
*/

suggestion- you can write a search bar and filter cards by client search (realtime filtering).
you can use my sample:
enter link description here

Mohammad Nazari0

Since you are already mapping the data inside the CardMenu component, you should:

  1. Import CardData from the corresponding file (I suppose it is in the same directory, so probably:
import CardData from "./CardData";
  1. Remove the extra calls to CardMenu:
<div className="group">
  <h1>Our Collection</h1>
  <CardMenu />
</div>
  1. Pass CardData as a prop menudata to CardMenu:
<CardMenu menudata={CardData} />

The final code of Menu would look something like this:

import React, { useState } from "react";
import CardMenu from "./CardMenu";
import CardData from "./CardData";

const Menu = () => {

  return (
    <div className="group">
      <h1>Our Collection</h1>
      <CardMenu menudata={CardData} />
    </div>
  );
};

export default Menu;
Miguel Fernández0
Related