عمل toggle checkbox بغرض فلترة عناصر

ماهي المشكلة التي تواجهها اذاً 

بتاريخ الآن قال عمر قره محمد:

ماهي المشكلة التي تواجهها اذاً 

عفوا أخي حصل خطأ ما و أنا بصدد إعادة السؤال

بتاريخ 7 دقائق مضت قال محمود سعداوي:

السلام عليكم.

توصلت إلى القيام بفلترة بواسطة checkbox.

 

مثلما تلاحظون تظهر كافة العناصر في البداية ثم عند إختيار 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;

شكرا للمساعدة.

بتاريخ 1 ساعة قال محمود سعداوي:

عفوا أخي حصل خطأ ما و أنا بصدد إعادة السؤال

مثلما تلاحظون تظهر كافة العناصر في البداية ثم عند إختيار 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;

شكرا للمساعدة.

هل يمكنك مشاركة ملفات المشروع حتى استطيع تجريب الكود.

بتاريخ منذ ساعة مضت قال عمر قره محمد:

هل يمكنك مشاركة ملفات المشروع حتى استطيع تجريب الكود.

تفضل ملف src

src.zip

بتاريخ 7 ساعات قال محمود سعداوي:

تفضل ملف src

src.zip

يمكنك حل المشكلة بتغيير الوظيفة handleCheck إلى الشكل التالي :

const handleCheck = (event) => {
  if (checked.includes(event.target.value)) { // checked في حال كان العنصر المنقو موجود سابقاً في الـ 
    let updated = checked.filter(item => item !== event.target.value) // بحيث لا يبقى العنصر المنقور checked فلتر الـ 
    setChecked(updated) // checked حديث الـ 
  } else {
    let updated = [...checked, event.target.value]
    setChecked(updated)
  }
}

حيث في حال كانت الـ state المسمات checked تحتوي على الـ event.target.value (أي إذا كان الـ checkbox منقور سابقاً) تقوم بعمل فلترة لهذه الـ checked بحيث يتم إبقاء العناصر التي قيمتها لا تساوي event.target.value (أي حذف العنصر الذي قيمته event.target.value).