I wanna make sub-categories and show the posts by these sub-categories. I follow this project to make it but here are one list category I need more categories like this which are nested by the first category as I want. I have some changes to the App.js file but I am not able to fix it.
When I create a sub-category in the JSON file does not show the category name and post details also. how to do it plz help me if you want.
This is the main project GitHub link
** Here My Changes Codes :**
App.js
import React, { useState } from "react";
import Data from "./Data";
import Card from "./Card";
import Buttons from "./Buttons";
const App = () => {
const [item, setItem] = useState(Data);
const menuItems = [
...new Set(Data.category?.map((Val) => Val.category.subcategory)),
];
const filterItem = (curcat) => {
const newItem = Data.category.filter((newVal) => {
return newVal.category.subcategory === curcat;
});
setItem(newItem);
};
return (
<>
<div className="container-fluid">
<div className="row">
<h1 className="col-12 text-center my-3 fw-bold">
Food Filtering App
</h1>
<Buttons
filterItem={filterItem}
setItem={setItem}
menuItems={menuItems}
/>
<Card item={item} />
</div>
</div>
</>
);
};
export default App;
Button.js
import React from "react";
import Data from "./Data";
const Buttons = ({ filterItem, setItem, menuItems }) => {
return (
<>
<div className="d-flex justify-content-center">
{menuItems.map((Val, id) => {
return (
<button
className="btn-dark text-white p-1 px-2 mx-5 btn fw-bold"
onClick={() => filterItem(Val)}
key={id}
>
{Val}
</button>
);
})}
<button
className="btn-dark text-white p-1 px-3 mx-5 fw-bold btn"
onClick={() => setItem(Data)}
>
All
</button>
</div>
</>
);
};
export default Buttons;
Card.js
import React from "react";
const Card = ({ item }) => {
return (
<>
<div className="container-fluid">
<div className="row justify-content-center">
{item.map((Val) => {
return (
<div
className="col-md-4 col-sm-6 card my-3 py-3 border-0"
key={Val.id}
>
<div className="card-img-top text-center">
<img src={Val.subimg} alt={Val.subtitle} className="photo w-75" />
</div>
<div className="card-body">
<div className="card-title fw-bold fs-4">
{Val.subtitle} --
{Val.subprice}
</div>
<div className="card-text">{Val.subdesc}</div>
</div>
</div>
);
})}
</div>
</div>
</>
);
};
export default Card;
Data.js
const Data = [
{
id: "1",
title: "Poha",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://c.ndtvimg.com/2021-08/loudr2go_aloo-poha_625x300_05_August_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
desc: " Poha. Light, filling and easy to make, poha is one famous breakfast that is eaten almost everywhere in the country. And the best part is- it can be made in a number of ways. Kanda poha, soya poha, Indori poha, Nagpur Tari Poha are a few examples",
},
{
id: "2",
title: "Upma",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
desc: " A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
{
id: "3",
title: "Cheela",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://c.ndtvimg.com/2019-05/1afu8vt8_weight-loss-friendly-breakfast-paneer-besan-chilla_625x300_25_May_19.jpg?im=FaceCrop,algorithm=dnn,width=620,height=350",
desc: "A staple across Indian households, moong dal is widely used in a number of Indian delicacies. One such delicacy is moong dal cheela. You can also add paneer to this recipe to amp up the nutritional value and make it, even more, protein-dense",
},
{
id: "4",
title: "Channa Kulcha",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://i.ndtvimg.com/i/2015-04/chana-kulcha_625x350_41429707001.jpg",
desc: "A classic dish that never goes out of style. The quintessential chana kulcha needs only a few ingredients - cumin powder, ginger, coriander powder, carom powder and some mango powder, which is what gives the chana it's sour and tangy taste.",
},
{
id: "5",
title: "Egg Curry",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://i.ndtvimg.com/i/2017-11/goan-egg-curry_620x350_41511515276.jpg",
desc: "Eggs are a versatile food that can be cooked for any meal of the day. From breakfast to dinner, it can be a go-to food. Here is a mildly-spiced egg curry made with garlic, onions, a whole lot of kasuri methi, fresh cream, yogurt and fresh coriander.",
},
{
id: "6",
title: "Paneer Aachari",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://i.ndtvimg.com/i/2015-04/paneer_625x350_61429707960.jpg",
desc: "Don't get intimidated by the list of ingredients because not only are already in your kitchen cabinet, but also because all they'll need is 20 minutes of your time. Chunks of cottage cheese cooked in some exciting spices, yogurt and a pinch of sugar.",
},
{
id: "7",
title: "Fish Fry",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://i.ndtvimg.com/i/2015-06/indian-dinner_625x350_41434360207.jpg",
desc: "Get your daily dose of perfect protein. Pieces of surmai fish marinated in garlic, cumin, fennel, curry leaves and tomatoes are pan-fried in refined oil and served hot. This fish fry recipe has a host of delectable spices used for marination giving it a unique touch.",
},
{
id: "8",
title: "Dum Alloo",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://i.ndtvimg.com/i/2015-06/indian-dinner_625x350_51434362664.jpg",
desc: "Your family will thank you for this absolutely fantastic bowl of dum aloo cooked Lakhnawi style. Take some potatoes, crumbled paneer, kasuri methi, butter, onions and some ghee.",
},
{
id: "9",
title: "Malai Kofta",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://i.ndtvimg.com/i/2017-10/makhmali-kofte_620x350_51508918483.jpg",
desc: "A rich gravy made of khus khus, coconut and milk that tastes best with koftas made from khoya. This velvety and creamy recipe will leave you licking your fingers. Makhmali kofte can be your go-to dish for dinner parties as this is quite different from other kofta recipes and extremely delicious.",
},
{
id: "10",
title: "Malai Kofta",
category: [
{
id: "2",
subtitle: "Upma",
subcategory: "Breakfast",
subprice: "$1",
subimg:
"https://c.ndtvimg.com/2021-04/37hi8sl_rava-upma_625x300_17_April_21.jpg?im=FeatureCrop,algorithm=dnn,width=620,height=350",
subdesc:
" A quintessential South Indian Breakfast! Made with protein-packed urad dal and semolina followed by crunchy veggies and curd, this recipe makes for a hearty morning meal. With some grated coconut on top, it gives a beautiful south-Indian flavour.",
},
],
price: "$1",
img: "https://i.ndtvimg.com/i/2017-10/makhmali-kofte_620x350_51508918483.jpg",
desc: "A rich gravy made of khus khus, coconut and milk that tastes best with koftas made from khoya. This velvety and creamy recipe will leave you licking your fingers. Makhmali kofte can be your go-to dish for dinner parties as this is quite different from other kofta recipes and extremely delicious.",
},
];
export default Data;