Make Like button in react.js

Question

I wan't to make the only selected button change not all in the same time when i clicke on it

I've created this function which contains a Boolean state and the toggle it

 const [like, setLike] = useState(false);
 
  const handleLike=()=>{
    setLike(!like)
    console.log(like);
  }

and called it here iside the map

 return (
    <Grid container spacing={1} px="4%" width='100%' >
      {CardData.map((e, idx) => (
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              padding: 0,
              border: "1px solid #e0e0e07a",
              position: "relative",
              borderRadius: "1.5rem",
              width: "94%",
              boxShadow: "5px 5px 46px -46px #000000",
            }}
            mb={5}
            key={idx}
          >
            <Box width='100%' >
              
              <Box position="absolute" top=".4rem" right=".8rem">
                <IconButton
                  aria-label="fingerprint"
                  color="default"
                  sx={{
                    zIndex: "4",
                    bgcolor: "#4b4d4eb2",
                    width: "2rem",
                    padding: "4px",
                  }}
                  onClick={(e)=>handleLike(e)}
                >
                {like?<FavoriteIcon sx={{ width: ".8em", color: "#fff" }} />: <FavoriteBorderIcon sx={{ width: ".8em", color: "#fff" }} />}
                  
                  
                </IconButton>
              </Box>
              </Box>
            </Box>
</Grid>

You need one like value in state for each element of the array — Nick
– Nick, Commented Jul 17, 2023 at 1:40

Nick · Accepted Answer · 2023-07-17 03:08:58Z

First, make your like state into an array of likes:

 const [likes, setLikes] = useState([]);
 
  const handleLike=(idx)=>{
    const newLikes = [...likes];
    newLikes[idx] = !newLikes[idx];
    setLikes(newLikes);
  }

Then, make sure to operate on the correct item in the array:

 return (
    <Grid container spacing={1} px="4%" width='100%' >
      {CardData.map((e, idx) => (
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              padding: 0,
              border: "1px solid #e0e0e07a",
              position: "relative",
              borderRadius: "1.5rem",
              width: "94%",
              boxShadow: "5px 5px 46px -46px #000000",
            }}
            mb={5}
            key={idx}
          >
            <Box width='100%' >
              
              <Box position="absolute" top=".4rem" right=".8rem">
                <IconButton
                  aria-label="fingerprint"
                  color="default"
                  sx={{
                    zIndex: "4",
                    bgcolor: "#4b4d4eb2",
                    width: "2rem",
                    padding: "4px",
                  }}
                  onClick={(e) => handleLike(idx)}
                >
                {likes[idx] ? <FavoriteIcon sx={{ width: ".8em", color: "#fff" }} />: <FavoriteBorderIcon sx={{ width: ".8em", color: "#fff" }} />}
                  
                  
                </IconButton>
              </Box>
              </Box>
            </Box>
</Grid>

Importantly, this will only work if elements are in consistent positions in the array. If they could get moved around, then use some other unique key to identify the correct item to like.

alvaroelpob · Accepted Answer · 2023-07-17 01:45:25Z

0

You should create a like useState for each Box. You can do something like this:

const Child = (props) => {
    const [like, setLike] = useState(false);
     
    const handleLike= () => {
       setLike(!like)
       console.log(like);
     };

    return (
        /* What renders inside the Box */
    )
};

const Parent = () => {
    return (
        {CardData.map((e, idx) => (
            <Child key={idx} props={props}>
        )}
    )
}

answered Jul 17, 2023 at 1:45

alvaroelpob

3111 silver badge7 bronze badges

2 Comments

mimo Over a year ago

This is the same as I did and still make all like button changes not the selected one

alvaroelpob Over a year ago

Can you show me full code via jsfiddle or something please

Collectives™ on Stack Overflow

Make Like button in react.js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related