Radio button onChange function doesnt update the state of app - React

Question

I am trying to learn React but stuck on sth. I have checked other topics as well but couldnt find the answer.

I am trying to shut down the app with on/off radio buttons. When I first run the app, pressing Q works and play the sound. When I click Off radio but it doesnt work anymore which is I am trying to do. However when I click On radio button again, it doesnt play any sound.

I am also open to your recommendations to optimize my code.

let { Button, ButtonToolbar, ButtonGroup, Radio } = ReactBootstrap;

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        power: true,
    };
    this.playSound = this.playSound.bind(this);
    this.turnItOff = this.turnItOff.bind(this);
    const bankOne = [{
    keyCode: 81,
    keyTrigger: 'Q',
    id: 'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    keyCode: 87,
    keyTrigger: 'W',
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }, {
    keyCode: 69,
    keyTrigger: 'E',
    id: 'Heater-3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  }, {
    keyCode: 65,
    keyTrigger: 'A',
    id: 'Heater-4',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
  }, {
    keyCode: 83,
    keyTrigger: 'S',
    id: 'Clap',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
  }, {
    keyCode: 68,
    keyTrigger: 'D',
    id: 'Open-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
  }, {
    keyCode: 90,
    keyTrigger: 'Z',
    id: "Kick-n'-Hat",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
  }, {
    keyCode: 88,
    keyTrigger: 'X',
    id: 'Kick',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
  }, {
    keyCode: 67,
    keyTrigger: 'C',
    id: 'Closed-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
  },
];
    this.audio = new Audio(bankOne[1].url)
  }
  
  playSound(){
    if (this.state.power == true) {
      return this.audio.play();
    }
  };
  
  turnItOff() {
    if (this.state.power == true) {
    this.setState({
      power: false
    })      
    } else {
    this.setState({
      power: false
    })        
    }
  };
  
  render(){
    return(
    <div id='container' >
      <div className='buttons' >
        <div className='firstLine'>
          <ButtonToolbar>
            <Button bsStyle="primary" className='drum-pad' bsSize="large"  onClick = {this.playSound}>Q</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">W</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">E</Button>
          </ButtonToolbar>
        </div>
        <div className='firstLine'>
          <ButtonToolbar>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">A</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">S</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">D</Button>
          </ButtonToolbar>   
        </div>  
        <div className='firstLine'>
          <ButtonToolbar>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">Z</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">X</Button>
            <Button bsStyle="primary" className='drum-pad' bsSize="large">C</Button>
          </ButtonToolbar>   
        </div>
      </div>
      <div className='setting'>
        <div>
          <ButtonGroup className='radio' >
            <Radio name="groupOptions" defaultChecked onChange = {this.turnItOff} >ONN</Radio>     
            <Radio name="groupOptions" onChange = {this.turnItOff}>OFF</Radio>  
          </ButtonGroup>
        </div>
        <div>
          <div id='display' />          
        </div>
        <div>
          <ButtonGroup className='radio' >
            <Button bsStyle="success">Vol +</Button>
            <Button bsStyle="danger">Vol -</Button>
          </ButtonGroup>
          <ButtonGroup className='changeTune' >
            <Radio name="groupOptions">Flute Kit</Radio>           
            <Radio name="groupOptions">Piano Kit</Radio>  
          </ButtonGroup>          
        </div>
      </div>
    </div>
    )
  }
}

ReactDOM.render(
	<App/>,
    document.getElementById('drum-machine')
);

#container{
  background-color:#f5f5f5;
  margin: 30px auto;
  width: 30%;
  height: 200px;
  border: 3px solid #337ab7;
  padding: 10px;
}

.buttons{
  float:left;
}

.radio{
  display:inline-block;
  margin: 4px;
}

.firstLine {
  margin: 10px;
}

#display{
  background-color: #337ab7;
  float: left;
  width: 180px;
  height: 40px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id='drum-machine'></div>

Colin Burke · Accepted Answer · 2018-07-27 17:05:10Z

2

This:

  turnItOff() {
    if (this.state.power == true) {
      this.setState({
        power: false
      });
    } else {
      this.setState({
        power: false
      });
    }
  }

Should be something like this:

toggle() {
  this.setState({ power: !this.state.power });
}

The way you have it, it will only ever set power to be false.

answered Jul 27, 2018 at 17:05

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

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

3 Comments

sinan Over a year ago

I tried but didnt work. Output is same I can close set power to be false can not change it true. thanks anyway for the toggle idea

Colin Burke Over a year ago

It works for me, are you sure you're doing it right? Here's a link to CodeSandbox: codesandbox.io/s/q97kw275y9

sinan Over a year ago

I guess you are right maybe there is a problem with codepen

Dhananjai Pai · Accepted Answer · 2018-07-27 17:03:51Z

0

if (this.state.power == true) {
    this.setState({
    power: false
})      
} else {
this.setState({
  power: false
})

Both if and else statements are doing the same thing ? Can you please check the logic ?

answered Jul 27, 2018 at 17:03

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

Comments

Sankalp · Accepted Answer · 2018-07-27 17:20:16Z

0

got the issue,

the state is not changing properly on turnItOff method.

update the code as follows:

 turnItOff() {
if (this.state.power == true) {
this.setState({
  power: !this.state.power
})      
} else {
this.setState({
  power: !this.state.power
})        
}

};

fiddle here

edited Jul 27, 2018 at 17:20

answered Jul 27, 2018 at 17:17

Sankalp

761 silver badge8 bronze badges

2 Comments

Colin Burke Over a year ago

For future reference, you can shorten this to one line, as in my answer :)

devserkan Over a year ago

I also recommend using a callback for setState when we use this.state. This is a safer way of updating our state. this.setState( prevState => ( { power: !prevState.power } ) )

Collectives™ on Stack Overflow

Radio button onChange function doesnt update the state of app - React

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related