this code setting all post to true react js-CodePudding

const likeHandler = (index) => {
  
const allData = [...urls]
const getMatchingImage = allData.find((_item, i) => i === index);
const getMatchingImageIndex = allData.indexOf(getMatchingImage)

if (index === getMatchingImageIndex) {
  setLike(true);
}
console.log('key index handler', index);
console.log('key index getMatchingImage', getMatchingImage)
console.log('key index getMatchingImageIndex', getMatchingImageIndex)

}

<div className={styles.imgContainer}>
            {urls.map((url, index) => (
               <Box key={index}>
               <div className={styles.postHeading}>
                 <img src='https://placehold.co/70x70' alt=''/>
                 <div className={styles.postUserName}>Dinesh Kumar</div>
               </div>
               <div className={styles.imgContainer} style={{backgroundImage: `url(${url})`}}></div>
               <div className={styles.actionButtons}>
                 <div>
                  {!like ? 
                   <AiOutlineHeart onClick={() => {likeHandler(index)}} className={`me-2`}/> :
                   <AiFillHeart onClick={() => {unLikeHander(index)}} className={`me-2`} />
                   }
                   <AiOutlineMessage className={`me-2`}/>
                   <FiSend className={`me-2`}/>
                 </div>
                 <div>
                  <FiBookmark/>
                 </div>
               </div>
             </Box>
          ))}

        </div>

I am working on post like functionality when I likes a particular post it liked all post. I am consoling all information. Please have a look

CodePudding user response：

It's better to use classes. instead of styles. This is such a conditional standard when you use .module.css Instead of

<div className={styles.imgContainer}>

better this way :

<div className={classes.imgContainer}>

CodePudding user response：

You should declare the like property as an array of boolean and toggle the values referring to the element with index:

const [like, setLike] = useState(new Array(urls.length).fill(false));

...

const likeHandler = (index) => {
  const allData = [...urls];
  const getMatchingImage = allData.find((_item, i) => i === index);
  const getMatchingImageIndex = allData.indexOf(getMatchingImage);

  const updatedLikes = [...like];
  updatedLikes[index] = true;
  setLike(updatedLikes);
};

...

<div>
    {!like[index] ? (
        <AiOutlineHeart
              onClick={() => {
                likeHandler(index);
              }}
              className={`me-2`}
            />
          ) : (
            <AiFillHeart
              onClick={() => {
                unLikeHander(index);
              }}
              className={`me-2`}
            />
          )}
          <AiOutlineMessage className={`me-2`} />
    <FiSend className={`me-2`} />
</div>