In React Like Button Count is not Updating

Question

Here, I'm getting data from API in array of objects format. i'm showing each object data in a section, for that each section i need to add a like button. Default the like will be 0, when i press like button it has to increase by 1.

import { useEffect, useState } from "react";
import "./styles.css";
import { FaThumbsUp } from "react-icons/fa";
export default function App() {
  const [userData, setUserData] = useState();
  const [like, setLike] = useState(0);
  const getData = async () => {
    let response = await fetch("https://jsonplaceholder.typicode.com/users");
    let result = await response.json();
    setUserData(result);
  };
  useEffect(() => {
    getData();
  });
  const likeHandler = (i) => {
    userData.find((data, index) => {
      if (index !== i) {
        setLike(0);
      } else {
        setLike(1);
        console.log("hello", like, i);
      }
    });
  };
  return <div className="App"> {userData.map((val, i) => (
    <div key={i} style={{ backgroundColor: "red" }}>
      <p>{val.name}</p>
      <p>{val.username}</p>
      <p>{val.email}</p>

      <div>
        <FaThumbsUp onClick={() => likeHandler(i)} />
        {like}
      </div>
    </div>
  ))}</div>;
}

Answer 1

So I assume each user has their individual like count. Because in your original code you only have 1 like state, so even if you managed to pull it off you will have a total like count instead.

What you can do is merge the like into the userData.

High-level overview:

import { useState } from "react";
import { FaThumbsUp } from "react-icons/fa";

export default function App() {
  const [userData, setUserData] = useState();

  // ... code omitted, assume userData is correctly fetch

  const handleLike = index => () => {    
    setUserData(prevUserData => {
      const newUserData = prevUserData.slice(); // shallow copy array
      newUserData[index] = {
        ...newUserData[index],
        like: (newUserData[index]?.like ?? 0) + 1
      };

      return newUserData;
    });
  };

  return <div className="App"> {userData.map((val, i) => (
    <div key={i} style={{ backgroundColor: "red" }}>
      <p>{val.name}</p>
      <p>{val.username}</p>
      <p>{val.email}</p>

      <div>
        <FaThumbsUp onClick={handleLike(i)} />
        {val.like}
      </div>
    </div>
  ))}</div>;
}