CODEWITHSUNDEEP
javascriptreactjs
vlad-ardelean
vlad-ardelean

Reputation: 7622

Why are my radio buttons not toggling state in react?

I'm trying to partially follow the react tutorial.

I'm at this point trying to create a component that has 2 input fields of type "radio". One is checked by default. I'm trying to mimic a behavior whereby if I click on the other radio button, the currently checked one will be turned off, and the one clicked will be turned on.

The thing is, after I click on the one not initially checked, they both turn off "forever".

I have debugged by code, and up to the call to setState everything works. The state is set as I want it to be set, but the buttons are not updating.

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = this.createInitialState({celsiusChecked: true})
    this.handleRadioTicked = this.handleRadioTicked.bind(this)
  }

  createInitialState(additionalState={}){
    let state = {
      fahrenheitChecked: false,
      celsiusChecked: false
    }

    state = Object.assign(state, additionalState)

    return state
  }

  handleRadioTicked(event){
    event.preventDefault()

    let radioName = event.target.name
    let stateProperty

    if (radioName === 'c'){
      stateProperty = 'celsiusChecked'
    } else if (radioName === 'f'){
      stateProperty = 'fahrenheitChecked'
    } else {
      throw Exception("something bad happened...probably the input field names have changed")
    }

    let newState = this.createInitialState()
    newState[stateProperty]= true;

    // the newState is calculated OK. Checked for both buttons.
    // Also, initially, the buttons render properly
    this.setState(newState) 
  }

  render(){
    return (
      <div>
          <form>
            <fieldset>
              <input type="radio" name="f" value="fahrenheit" checked={this.state.fahrenheitChecked} onChange={this.handleRadioTicked}/>
              <label htmlFor="f">Fahrenheit</label>
              <input type="radio" name="c" value="celsius" checked={this.state.celsiusChecked} onChange={this.handleRadioTicked}/>
              <label htmlFor="c">Celsius</label>
            </fieldset>
        </form>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

I am running this example with this codepen setup, which is what facebook provided: http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

Am I missing anything?

[EDIT] i updated the name of the inputs, and corrected the code. A different issue: Now the inputs NEVER change state. I debugged and the setState method is called with the proper state, however the buttons don't switch state. I put a breakpoint before the this.setState call, and the buttons looked ok then. They are being switched back to the initial state however after that point somewhere. I should probably try to put a DOM breakpoint of some kind....

The new code:

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = this.createInitialState({celsiusChecked: true})
    this.handleRadioTicked = this.handleRadioTicked.bind(this)

    this.setState = this.setState.bind(this)
  }

  createInitialState(additionalState={}){
    let state = {
      fahrenheitChecked: false,
      celsiusChecked: false
    }

    state = Object.assign(state, additionalState)

    return state
  }

  handleRadioTicked(event){
    event.preventDefault()

    let radioValue = event.target.value
    let stateProperty

    if (radioValue === 'celsius'){
      stateProperty = 'celsiusChecked'
    } else if (radioValue === 'fahrenheit'){
      stateProperty = 'fahrenheitChecked'
    } else {
      throw Exception("something bad happened...probably the input field names have changedx")
    }

    let newState = this.createInitialState()
    newState[stateProperty]= true;

    // Here the newState is succesfully created each time
    // ...still, the radio buttons don't "react" appropriately - pardon the pun
    this.setState(newState) 
  }

  render(){
    return (
      <div>
          <form>
            <fieldset>
              <input type="radio" name="scale" value="fahrenheit" checked={this.state.fahrenheitChecked} onChange={this.handleRadioTicked}/>
              <label htmlFor="f">Fahrenheit</label>
              <input type="radio" name="scale" value="celsius" checked={this.state.celsiusChecked} onChange={this.handleRadioTicked}/>
              <label htmlFor="c">Celsius</label>
            </fieldset>
        </form>
      </div>
    )
  }
}

Upvotes: 0

Views: 4417

Answers (3)

secavfr
secavfr

Reputation: 928

My problem, with ReactJS, was that I was defining the checked attribute of my radio buttons instead of the defaultChecked one !

Upvotes: 1

Sidney Martins
Sidney Martins

Reputation: 45

I know that this question is too old, but it can help someone.

Try to remove the event.preventDefault() when you use this you prevent the main functionality of the radio button the toggle.

Upvotes: 2

Rohith K P
Rohith K P

Reputation: 3551

for the radio button the name attribute of the two input must match

<input type="radio" name="f"

change both names to "f" or some other string and try again.

See example below

  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>

Upvotes: 3

Related Questions