Toggle with checkbox in react

Question

In my react app I have an initial state like this:

state= {
  graphBackgroundColor: '#fff',
  graphLabelColor: '#000',
}

I have a checkbox that calls this function:

toggleCOlor = event => {
 console.log('toggling color');
  this.setState({
    graphBackgroundColor: '#000',
    graphLabelColor: '#fff',
    renderCalories: event.target.value === 10
  });
}

This works functionally, but no matter whether the ckeckbox is checked or not the colors will now stay what they were set to in that function. How can I make this to toggle so that if the checkbox is checked then graphBackgroundColor is #000 and if it's unchecked it's #fff?

You have to initialize the state with graphBackgroundColor: '#fff', — Surya
– Surya, Commented May 7, 2020 at 3:47
what do you mean exactly @Owner? I do have the initial state set as that when the module loads — Geoff_S
– Geoff_S, Commented May 7, 2020 at 3:50
I think you need to check the check box status. If checked then #fff may be or #000 if not checked — Koushik
– Koushik, Commented May 7, 2020 at 4:02

Hải Vũ · Accepted Answer · 2020-05-07 04:06:59Z

2

you can try

     this.setState(prevState => ({
      graphBackgroundColor: prevState.graphBackgroundColor === '#000' ? '#fff' : '#000',
      graphLabelColor: prevState.graphLabelColor === '#fff' ? '#000' : '#fff',
       renderCalories: event.target.value === 10
    }));

answered May 7, 2020 at 4:06

Hải Vũ

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

illiteratewriter · Accepted Answer · 2020-05-07 03:52:28Z

1

toggleCOlor = event => {
 console.log('toggling color');
  this.setState({
    graphBackgroundColor: this.state.graphBackgroundColor === '#000' ? '#fff' : '#000',
    graphLabelColor: this.state.graphLabelColor === '#fff' ? '#000' : '#fff',
    renderCalories: event.target.value === 10
  });
}

If you want, you can write a function which passes in the current colour and return the toggled colour instead of the one lined ternary operator.

returnAlternateColor = (color) => {
    if(color === "#fff") return '#000;
    if(color === '#000') return '#fff';
}

and then call this function passing this.state.graphLabelColor instead of the ternary operator. This way you can have even more options.

answered May 7, 2020 at 3:52

illiteratewriter

4,3532 gold badges26 silver badges46 bronze badges

Comments

user7396942 · Accepted Answer · 2020-05-07 04:14:12Z

1

create a function onChange to check or unckeck

onChange=(e)=>{
 [e.target.name]:e.target.value
}

you can create a function for example to change of color:

myStyleWithConditional=()=>{
   background:event.target.value === 10? "#000":"#fff"
}

and in your return

<div style={this.myStyleWithConditional}></div>
<input type="checkbox" name="check" value=10>

answered May 7, 2020 at 4:14

user7396942

Collectives™ on Stack Overflow

Toggle with checkbox in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related