Title: CSS styling for a boolean React hook button
Tags: reactjs;jsx
Question: I have a simple message board with nested comments built in React. I'm trying to add a favorite button (just a button that toggles filled/unfilled contingent on its boolean value). Every tutorial I find involves making a new component, but I'd like to include this in my primary app code (using a hook/useState).
I've tried some various CSS stuff like active, etc. I'm rusty with CSS and a bit lost using it on JSX. Ideally, it'd be a star button that fills/unfills, but I want to figure out the simple basics here first.
function Toggle(props) {
const [toggleState, setToggleState] = useState(false);
function toggle() {
setToggleState(toggleState === false? true : false);
return (
<div {...props}&gt;
<Button
className={`switch ${toggleState}`}
onClick={toggle}&gt;
Favorite
</Button&gt;
</div&gt;
Toggle=styled(Toggle)`
//dunno what to put here
The button shows up just fine but nothing I try in the style will make it toggle colors (or filled/unfilled) on click. How can I do this?
Comment: Not an answer but just a suggestion, this syntax is more readable `setToggleState(!toggleState);` than this `setToggleState(toggleState === false? true : false);`

Comment: I think you don't really need to use styles-components here, but is just an opinion


Here is another answer: First of all this syntax is more readable
function toggle() {
setToggleState(!toggleState);
then you can use this to change the class of your button
className={`switch ${toggleState ? "some_class" : "some_other_class"}`}

Here is another answer: If you use styled-components, you can customize Button directly. In Tagged templates, switch styles according to prop.
const Button = styled(Icon)`
color: ${props =&gt; (props.filled ? 'pink' : 'transparent')};
-webkit-text-stroke: 2px pink;
overflow: hidden;
margin: 0 0.5em;
cursor: pointer;
function Toggle(props) {
const [toggleState, setToggleState] = useState(false)
function toggle() {
setToggleState(toggleState =&gt; !toggleState)
return (
<Button filled={toggleState} onClick={toggle}&gt;
favorite
</Button&gt;
Adapting based on props

Here is another answer: Following your code:
const StyledToggle=styled(Toggle)`
&amp;.true {
//true styles
&amp;.false {
//false styles
As you are using css in js you could also pass the state as a prop to the component and read it inside the tagged template:
return (
<div {...props}&gt;
<Button
toggleState={toggleState}
onClick={toggle}&gt;
Favorite
</Button&gt;
</div&gt;
const StyledToggle = styled(Toggle)`
font-weight: ${({toggleState}) =&gt; toggleState &amp;&amp; "bold"};

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2019:00:07/27/19', 'FavoriteCount': 2.0, 'PostTypeId': 1, 'Tags': '<reactjs><jsx>', 'Title': 'CSS styling for a boolean React hook button', 'ViewCount': 2252, 'id': 57236486, 'user_AboutMe': '', 'user_AccountId': 15676509.0, 'user_DisplayName': 'struensee', 'user_Reputation': 506.0, 'user_Views': 54.0, 'user_id': 11311650.0}}