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

user_12475557 0
Viewed 202

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;
use-state reactjs javascript
4 Answers

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>
user_86908570

Firstly you should update your state via callbacksetThumbUp ((thumb) => !thumb), secondly you have the problem in this line <ThumbUpIcon style={ThumbStyle} />, this JSX get rendered either the button like clicked or not, so you have to put a condition on it:

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);
  const style = thumb ? ThumbUpButton : ThumbStyle;

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

export default Liker;
user_114985680

change this might work using functinal set state

onClick={() => setThumbUp(s=>!s)}

user_117749590

Please set the value directly

onClick={() => setThumbUp(!thumb)}

user_61799090
Related