الفلترة بإختيار متعدد.

محمود_سعداوي · 8 ديسمبر 2022

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

قمت بعمل مشروع react أردت فيه تطبيق filter by checkbox.

في البداية أنشأت الدالة handleCheck التي بواسطتها أستطيع التعرف على العناصر التي أريد إضافتها.

ثم قمت بإنشاء الفرضية التي بها أحدد العناصر الظاهرة على الصفحة.

الكود التالي سوف يوضح أكثر.

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([])

  // 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)
    console.log(updated.includes(data[0].category));
  }
  return (
    <div className="App">
      <Header
        // likesNumber = {likesNumber}
      />
      <div className='main'>
        <Aside
          categories = { categories }
          handleCheck = {handleCheck}
        />
        {
          <div className='products-section'>
            {
              data.map(product => 
                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;

الكود يعمل بشكل جيد ووقع تطبيق الفلترة.

المشكل هو عند تحديث الصفحة لايظهر أي منتج بسبب المصفوفة الفارغة.

السؤال: كيف يمكنني إظهار كافة النمتجات في البداية و من ثم القيام بالفلترة.

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

عمر قره محمد · 9 ديسمبر 2022

يمكنك تعديل الكود الخاص بعرض المنتجات للشكل التالي :

{
  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}
                    />
  ) : []
          )
}

بحيث يعيد كل المنتجات عندما تكون المصفوفة checked فارغة ولكن إذا لم تكن فارغة فإنه يتأكد من انها تحتوي على الفئة الخاصة بالمنتج.

محمود_سعداوي · 9 ديسمبر 2022

بتاريخ 2 ساعات قال عمر قره محمد:

يمكنك تعديل الكود الخاص بعرض المنتجات للشكل التالي :


{
  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}
                    />
  ) : []
          )
}

بحيث يعيد كل المنتجات عندما تكون المصفوفة checked فارغة ولكن إذا لم تكن فارغة فإنه يتأكد من انها تحتوي على الفئة الخاصة بالمنتج.

الفلترة بإختيار متعدد.

السؤال

محمود_سعداوي

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمود_سعداوي

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية