Question 209334 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Make Like button in react.js

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>
Tags:

2

Answers


  1. 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}>
        )}
    )
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search