increment counter in the row

Question

I want to increments a counter when I click each name of the person in table. Each name has a counter and the counter is in different row.

I tried to follow a tutorial related to 'click counter'. When I click one of the name of the person, it effects to all counter. Not my needed. I share my code here. (Notes: I'm using Material-UI and React)

UserTable.js

export default function UserTable(props) {
  const classes = useStyles();

  const [count, setCount] = useState(0);

  return (
    <Grid item xs={6}>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell align="center">Name</TableCell>
              <TableCell align="center">Email</TableCell>
              <TableCell align="center">Click Counter</TableCell>
              <TableCell align="center">Actions</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {props.users.length > 0 ? (
              props.users.map((user) => (
                <TableRow key={user.id}>
                  <TableCell align="center">
                    <Button onClick={() => setCount(count + 1)}>
                      {user.name}
                    </Button>
                  </TableCell>
                  <TableCell align="center">{user.username}</TableCell>
                  <TableCell align="center">{count}</TableCell>
                  <TableCell align="center">
                    <Button
                      variant="contained"
                      color="primary"
                      onClick={() => {
                        props.editRow(user);
                      }}
                    >
                      Edit
                    </Button>
                    &emsp;
                    <Button
                      variant="contained"
                      color="secondary"
                      onClick={() => props.deleteUser(user.id)}
                    >
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell align="center">No users</TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </TableContainer>
    </Grid>
  );
}

Home.js

export default function Home() {
  const classes = useStyles();

  const usersData = [
    { id: 1, name: "Tania", username: "floppydiskette" },
    { id: 2, name: "Craig", username: "siliconeidolon" },
    { id: 3, name: "Ben", username: "benisphere" },
  ];

  const [users, setUsers] = useState(usersData);

  const [editing, setEditing] = useState(false);

  const initialFormState = { id: null, name: "", username: "" };

  const [currentUser, setCurrentUser] = useState(initialFormState);

  const updateUser = (id, updatedUser) => {
    setEditing(false);

    setUsers(users.map((user) => (user.id === id ? updatedUser : user)));
  };

  const editRow = (user) => {
    setEditing(true);

    setCurrentUser({ id: user.id, name: user.name, username: user.username });
  };

  const addUser = (user) => {
    user.id = users.length + 1;
    setUsers([...users, user]);
  };

  const deleteUser = (id) => {
    setUsers(users.filter((user) => user.id !== id));
  };

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <UserTable users={users} editRow={editRow} deleteUser={deleteUser} />
        {editing ? (
          <EditUserForm
            setEditing={setEditing}
            currentUser={currentUser}
            updateUser={updateUser}
          />
        ) : (
          <AddUserForm addUser={addUser} />
        )}
      </Grid>
    </div>
  );
}

Answer 1

you need to ( const [count, setCount] = useState(0); ) use something different form an integer value, because your counter is share from users in your table.

you can maybe use an object and when click for increment maybe you can save the counter under a property that is the name or id of custumer and do something like that

setCount(prevState => {
    return {
       ...prevState,
       [UserID] : prevState.UserID ? prevState.UserID++ : 1
    }
})

and when you read data

couter[UserID]