// the User functional component
function User(props) {
  // the hook that manages internal state
  const [rating, setRating] = React.useState(0);

  /*
   * event handlers to update internal state
   */
  function handleLike() {
    setRating(1);
  }

  function handleDislike() {
    setRating(-1);
  }

  return (
    <div className="user">
      <img src={`img/${props.id}.png`} width="75" />
      {props.name}
      <div className="rating">
        <button onClick={handleLike} disabled={rating > 0}>👍</button>
        {rating}
        <button onClick={handleDislike} disabled={rating < 0}>👎</button>
      </div>
    </div>
  );
}