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

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

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

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

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

Capture.JPG.6c8c12ae380bf2801609a9e72de0ae41.JPG مثلما تلاحظون كافة المنتجات 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

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

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

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

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

تفضل

src.zip

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

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

تفضل

src.zip

عدل الوظيفة 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)
}

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

بتاريخ 8 ساعات قال عمر قره محمد:
عدل الوظيفة 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

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

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

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

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

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

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

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

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

بتاريخ 39 دقائق مضت قال عمر قره محمد:

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

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

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

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

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

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

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

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

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

السؤال

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

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

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

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

Recommended Posts

عمر قره محمد

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

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

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

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

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

عمر قره محمد

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

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

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

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

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

عمر قره محمد

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

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

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

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية