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

السؤال

نشر

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

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

في المثال التالي عندما أضغط على زر 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>
  )
}

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

Recommended Posts

  • 0
نشر
بتاريخ 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)
}

 

  • 0
نشر
بتاريخ 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

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

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

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

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

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

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

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

 

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

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

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

 

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

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

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

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

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

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...