I am currently developing a React project that utilizes an API to showcase restaurant menu data.
The structure of my data in the API is as follows:
[
{
"Name": "Chicken pizza",
"Category": "Pizza",
"Type": "non-veg",
"Price": 376,
"id": "1"
},
{
"Name": "Paneer Cheese Pizza",
"Category": "Pizza",
"Type": "veg",
"Price": 350,
"id": "2"
}
]
To display this data in my project, I am utilizing a map function like so:
{data.map(item =>
<div>
<div className='items' key={item.id}>
<ul>
<li className={item.Type === 'veg' ? 'veg' : 'non-veg'}></li>
<li>{item.Name}</li>
<li>₹ {item.Price}</li>
<img src='/images/pizza1.jpg'/>
<div className='hr'></div>
</ul>
</div>
</div>
)}
Now, I want to incorporate a checkbox to show only the items with the "veg" type from my API. When unchecked, it should display all items. I have created a state for the checkbox like this:
const [veg, setVeg] = useState(false);
const vegOnly = () =>{
setVeg(false);
}
Here is the HTML code for the checkbox:
<label>
<input type="checkbox" value={veg} onChange={vegOnly}/>
Veg Only
</label>
I am looking for guidance on how to modify my code to filter between "veg" and "non-veg" types using the checkbox state without disrupting the existing functionality. Any ideas or suggestions are welcome!
You can find more details and clarification on my doubt via this sandbox link:
https://codesandbox.io/s/upbeat-bartik-8jpc2r?file=/src/App.js
I aim to utilize the checkbox to filter data based on "veg" and "non-veg" types effectively, but require assistance in writing the function for the checkbox state to achieve this feature.