I am trying to render folowing menu item dynamicly based on category but Stuck it is not rendering properly. It it rather giving me error or rendering just item unable to filter through category
export default const Menu =[
{
id: 120,
name: "Johnnie Walker ",
category: "SPIRITS",
price: "$8 per 30ml",
description:
"Black Label",
},
{
id: 125,
name: "Johnnie Walker (Gold Label)",
category: "Drinks",
price: "$12 per 30ml",
description:
"Johnnie Walker (Gold Label)",
},
{
id: 122,
name: "Smirnoff Vodka",
category: "SPIRITS",
price: "$9 per 30ml",
description:
"Vodka ",
},]
import React, { useState } from 'react';
import Menu from './Menu';
import styled from 'styled-components';
import { IconContext } from 'react-icons';
import { FiPlus, FiMinus } from 'react-icons/fi';
const AccordionMenu = () => {
const [items, setItems] = useState(Menu);
const [clicked, setClicked] = useState(false);
const filterItem = (categItem) => {
const updatedItems = Menu.filter((curElem) => {
return curElem.category === categItem;
});
setItems(updatedItems);
}
const toggle = index => {
if (clicked === index) {
//if clicked question is already active, then close it
return setClicked(null);
}
setClicked(index);
};
<IconContext.Provider value={{ color: '#00FFB9', size: '25px' }}>
<AccordionSection>
<Container>
{Data.map((item, index) => {
return (
<>
<Wrap onClick={() => toggle(index)} key={index}>
<h1 onClick={() => filterItem()}>{data.category}</h1>
<span>{clicked === index ? <FiMinus /> : <FiPlus />}</span>
</Wrap>
{clicked === index ? (
<Dropdown>
<p>{item.name}</p>
<p>{item.description}</p>
<p>{item.price}</p>
</Dropdown>
) : null}
</>
);
})}
</Container>
</AccordionSection>
</IconContext.Provider>
);
};
Hi, I am trying to render folowing menu item dynamicly based on category but Stuck it is not rendering properly. It it rather giving me error or rendering just item unable to filter through category