اذهب إلى المحتوى

السؤال

نشر

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

قمت بعمل مشروع 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;

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

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

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

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

Recommended Posts

  • 0
نشر

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

{
  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 فارغة ولكن إذا لم تكن فارغة فإنه يتأكد من انها تحتوي على الفئة الخاصة بالمنتج.

  • 0
نشر
بتاريخ 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 فارغة ولكن إذا لم تكن فارغة فإنه يتأكد من انها تحتوي على الفئة الخاصة بالمنتج.

 

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...