تحديد عنصر معين باستعمال find react js

محمود سعداوي2 · 5 ديسمبر 2022

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

عندي مشكل في تحديد العنصر الذي أريده.

في المثال التالي عندما أضغط على زر like تتحول كافة العناصر إلى dislike وليس العنصر المحدد.

مثلما تلاحظون كافة المنتجات dislike

قمت باستعمال الدالة find و كن دون جدوى.

function App() {
  const [toggleLike,setToggleLike] = useState(false)
  const handleClick = (id) => {
    data.find(item => item.id === id)
    console.log(data);
    setToggleLike(!toggleLike)
  }

  return (
    <div className="App">
      <Header/>
      <div className='main'>
        <Aside/>
        {
          <div className='products-section'>
            {
              data.map(product => (
                <Product
                  key = {product.id}
                  id = {product.id}
                  title = {product.title}
                  img = {product.img}
                  price = {product.price}
                  handleClick = {()=>handleClick(product.id)}
                  toggleLike = {toggleLike}
                />
              ))
            }
          </div>
        }
      </div>
    </div>
  );
}

function Product({id,img,title,price,handleClick,toggleLike}) {
  
  return (

    <div className='card'>
      <div className='product-price'>{price} dt</div>
      <img src={img} className="card-img" alt=""/>
      <div className="card-body">
        <h5 className="card-title">{title}</h5>
        <div className='cart-btns'>
          <button type="button" className="like-btn" onClick={handleClick}>
            {
              toggleLike ? <BsFillHandThumbsDownFill/> : <BsFillHandThumbsUpFill/>
            }
          </button>
          {/* <button type="button" className="like-btn"></button> */}
          <button type="button" className="add-to-cart-btn"><BsCartFill/></button>
        </div>
      </div>
      {/* <Rating /> */}
    </div>
  )
}

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

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

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

محمود سعداوي2 · 5 ديسمبر 2022

بتاريخ On 5‏/12‏/2022 at 19:38 قال عمر قره محمد:

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

أظهر المزيد

تفضل

src.zipFetching info...

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

بتاريخ On 5‏/12‏/2022 at 19:40 قال محمود سعداوي:

تفضل

src.zipFetching info...

أظهر المزيد

عدل الوظيفة handleClick في الملف app.js إلى الشكل التالي :

const handleClick = (id) => {
    let findProd = data.find(item => item.id === id) // التعديل حدث هنا
    console.log(findProd);
    // console.log(selectedProduct);
    setSelectedProduct(findProd.id)
    setToggleLike(!toggleLike)
}

محمود سعداوي2 · 6 ديسمبر 2022

بتاريخ On 5‏/12‏/2022 at 20:31 قال عمر قره محمد:
عدل الوظيفة handleClick في الملف app.js إلى الشكل التالي :
const handleClick = (id) => {
    let findProd = data.find(item => item.id === id) // التعديل حدث هنا
    console.log(findProd);
    // console.log(selectedProduct);
    setSelectedProduct(findProd.id)
    setToggleLike(!toggleLike)
}
أظهر المزيد

نفس المشكل أخي.

عند النقر على like الخاصة بمنتج محدد تصبح كافة المنتجات dislike

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

بتاريخ On 6‏/12‏/2022 at 04:45 قال محمود سعداوي:

نفس المشكل أخي.

عند النقر على like الخاصة بمنتج محدد تصبح كافة المنتجات dislike

أظهر المزيد

في سؤالك كنت تقول ان المشكلة في تحديد العنصر الذي تريده :

بتاريخ On 5‏/12‏/2022 at 17:41 قال محمود سعداوي:

عندي مشكل في تحديد العنصر الذي أريده.

أظهر المزيد

واعتقد انني قد اخبرتك بأن الحل الاسهل لمشكلتك هو ان تقوم بإنشاء state مختلفة لكل عنصر وظهرت لديك مشكلة ثانية وهي انك تريد حساب عدد الاعجابات واخبرتك انه يمكنك فعل ذلك بإنشاء state مختلفة لذلك.

محمود سعداوي2 · 6 ديسمبر 2022

بتاريخ On 6‏/12‏/2022 at 05:07 قال عمر قره محمد:

في سؤالك كنت تقول ان المشكلة في تحديد العنصر الذي تريده :

واعتقد انني قد اخبرتك بأن الحل الاسهل لمشكلتك هو ان تقوم بإنشاء state مختلفة لكل عنصر وظهرت لديك مشكلة ثانية وهي انك تريد حساب عدد الاعجابات واخبرتك انه يمكنك فعل ذلك بإنشاء state مختلفة لذلك.

أظهر المزيد

شكرا لك أخي و لكن أعتقد أنك لم تفهمني.

أولا: المشكلة الأولى تظهر عند النقر على زر الإعجاب.

setSelectedProduct(findProd.id) قامت بتحديد العنصر الذي أنا بصدد النقر عليه.

إذن المشكل في setToggleLike(!toggleLike) حيث أنها تقوم بتغيير كافة الأزرار.

المشكل الآخر هو أني لا أريد تغيير state حيث أنني أحتاج الدالة handleClick قصد استعمالها كprops للمكون Header.

أرجو أن أكون قد وضحت الآن و أعتذر مجددا.

تحديد عنصر معين باستعمال find react js

السؤال

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

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

Recommended Posts

عمر قره محمد

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

عمر قره محمد

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

عمر قره محمد

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

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية