Hi Everyone ,i need your help in react problem ,my problem is i want to create multiple buttons based on filterItems .but only one button is created ,can somebody suugest the other way round to create buttons for each category ,not one button groupped together as in the image
my code
APP>js
*import* React, { useState } *from* 'react';
*import* Menu *from* './Menu';
*import* Categories *from* './Categories';
*import* items *from* './data';
const allCategories = ['all',...new Set(items.map((item)=> item.category))]
console.log(allCategories)
function App() {
const [menuItems ,setMenuItems] = useState(items)
const [categories,setCategories] = useState([allCategories])
const filterItems = (category) => {
*if*(category === "all"){
setMenuItems(items)
*return*;
}
const newItems = items.filter((item) => item.category === category)
setMenuItems(newItems)
}
*return* <main>
<section *className*="menu section">
<div *className*="title">
<h2>Menu</h2>
<div *className*="underline"></div>
</div>
<Categories *categories* = {categories} *filterItems* ={filterItems} />
<Menu *items*={menuItems}/>
</section>
</main>;
}
*export* *default* App;
*import* React, { useState } *from* 'react';
*import* Menu *from* './Menu';
*import* Categories *from* './Categories';
*import* items *from* './data';
const allCategories = ['all',...new Set(items.map((item)=> item.category))]
console.log(allCategories)
function App() {
const [menuItems ,setMenuItems] = useState(items)
const [categories,setCategories] = useState([allCategories])
const filterItems = (category) => {
*if*(category === "all"){
setMenuItems(items)
*return*;
}
const newItems = items.filter((item) => item.category === category)
setMenuItems(newItems)
}
*return* <main>
<section *className*="menu section">
<div *className*="title">
<h2>Menu</h2>
<div *className*="underline"></div>
</div>
<Categories *categories* = {categories} *filterItems* ={filterItems} />
<Menu *items*={menuItems}/>
</section>
</main>;
}
*export* *default* App;
**categories.js**
*import* React *from* 'react';
const Categories = ({categories,filterItems}) => {
*return*(
<div *className* = "btn-container">
{categories.map((category,index) => {
*return*(
<button
*type*="button"
*className* = "filter-btn"
*key* = {index}
*onClick* = {() => filterItems(category)}>
{category}</button>
)
}
)
}
</div>
)
}
*export* *default* Categories
Menu.js
*import* React *from* 'react';
const Menu = ({items}) => {
*return*(<div *className* = "section-center">
{items.map((menuItem) => {
const {id,title,img,desc,price} = menuItem;
*return* (<article *key* ={id} *className* = "menu-item">
<img *src*={img} *alt* = {title} *className* = "photo"></img>
<div *className*="item-info">
<header>
<h4>{title}</h4>
<h4 *className*="price">${price}</h4>
</header>
<p *className* = "item-text">{desc}</p>
</div>
</article>)
})}
</div>)}
*export* *default* Menu;
data.js
const menu = [
{
id: 1,
title: 'buttermilk pancakes',
category: 'breakfast',
price: 15.99,
img: './images/item-1.jpeg',
desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
},
{
id: 2,
title: 'diner double',
category: 'lunch',
price: 13.99,
img: './images/item-2.jpeg',
desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
},
{
id: 3,
title: 'godzilla milkshake',
category: 'shakes',
price: 6.99,
img: './images/item-3.jpeg',
desc: `ombucha chillwave fanny pack 3 wolf moon street art photo booth before they sold out organic viral.`,
},
{
id: 4,
title: 'country delight',
category: 'breakfast',
price: 20.99,
img: './images/item-4.jpeg',
desc: `Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism austin mlkshk truffaut, `,
},
{
id: 5,
title: 'egg attack',
category: 'lunch',
price: 22.99,
img: './images/item-5.jpeg',
desc: `franzen vegan pabst bicycle rights kickstarter pinterest meditation farm-to-table 90's pop-up `,
},
{
id: 6,
title: 'oreo dream',
category: 'shakes',
price: 18.99,
img: './images/item-6.jpeg',
desc: `Portland chicharrones ethical edison bulb, palo santo craft beer chia heirloom iPhone everyday`,
},
{
id: 7,
title: 'bacon overflow',
category: 'breakfast',
price: 8.99,
img: './images/item-7.jpeg',
desc: `carry jianbing normcore freegan. Viral single-origin coffee live-edge, pork belly cloud bread iceland put a bird `,
},
{
id: 8,
title: 'american classic',
category: 'lunch',
price: 12.99,
img: './images/item-8.jpeg',
desc: `on it tumblr kickstarter thundercats migas everyday carry squid palo santo leggings. Food truck truffaut `,
},
{
id: 9,
title: 'quarantine buddy',
category: 'shakes',
price: 16.99,
img: './images/item-9.jpeg',
desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
},
];
*export* *default* menu;
