عفوا أخي حصل خطأ ما و أنا بصدد إعادة السؤال
مثلما تلاحظون تظهر كافة العناصر في البداية ثم عند إختيار category معين (the category is checked) تظهر المنتجات الخاصة بتلك category.
ما أريده هو عند إعادة النقر على category معين (يعني تصبح the category is not checked) تختفي المنتجات التي تخص تلك category.
حاولت بالطريقة التالية:
import '../styles/App.css';
import Header from './Header'
import Aside from './Aside'
import Product from './Product'
import data from './data'
import {useState} from 'react'
function App() {
const [checked, setChecked] = useState([])
const [isChecked, setIsChecked] = useState(true)
// define products categories
const categories = data.reduce(
(acc, elem) =>
acc.includes(elem.category) ? acc : acc.concat(elem.category),
[]
)
const handleCheck = (event) => {
// let updated = [...checked,event.target.value]
// setChecked(updated)
if (isChecked) {
let updated = [...checked,event.target.value]
setChecked(updated)
}
setIsChecked(!isChecked)
}
return (
<div className="App">
<Header
// likesNumber = {likesNumber}
/>
<div className='main'>
<Aside
categories = { categories }
handleCheck = {handleCheck}
/>
{
<div className='products-section'>
{
data.map(product =>
checked.length === 0
? (
<Product
key = {product.id}
id = {product.id}
title = {product.title}
img = {product.img}
price = {product.price}
/>
) : checked.includes(product.category)
? (
<Product
key = {product.id}
id = {product.id}
title = {product.title}
img = {product.img}
price = {product.price}
/>
) : []
)
}
</div>
}
</div>
</div>
);
}
export default App;
شكرا للمساعدة.