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;
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>
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;
change this might work using functinal set state
onClick={() => setThumbUp(s=>!s)}