React useState() boolean toggle component adding instead of replacing values

Question

I've created a mock social media website where users can comment and "like" posts, and so I want to have a button with a thumbs up that will toggle between "liked" and "not liked". Problem is, when I click, the state value (unliked) is joined by the setState value(liked) intead of replaced. Where am I going wrong?

import React, { useState } from 'react';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';

const ThumbUpButton = {
  backgroundColor: 'rgb(115, 250, 179)',
  border: 'none',
  borderRadius: '5px',
}

const ThumbStyle = {
  backgroundColor: 'red',
  border: 'none',
  padding: '5px',
  borderRadius: '5px',
  margin: '1rem'
}

const Liker = () => {
  const [thumb, setThumbUp] = useState(false);

  return (
    <>
      <button style={{border: 'none', backgroundColor: 'transparent'}} onClick={() => setThumbUp(!thumb)}>
        <ThumbUpIcon style={ThumbStyle} />
        {thumb && <ThumbUpIcon style={ThumbUpButton} />}
      </button>
    </>
  );
}

export default Liker;

Answer 1

If I understand your question, you are asking why both a thumbs up and thumbs down sometimes render at the same time. This is because you unconditionally render the thumbs up, and conditionally render the thumbs down.

You should render one or the other. Since it's the same component and you are only swapping the style, then conditionally apply one or the other styling.

Additionally, it is common to use a functional state update when toggling a boolean state value since the next state necessarily depends on the previous state, i.e. thumb => !thumb. This avoids stale state enclosures in callbacks.

<button
  style={{
    border: 'none',
    backgroundColor: 'transparent'
  }}
  onClick={() => setThumbUp(thumb => !thumb)}
>
  <ThumbUpIcon style={thumb ? ThumbStyle : ThumbUpButton} />
</button>