React.js - How do I set a checked/selected radio button and track the onChange?

Question

I have a radio group for the days of the week in a component. If the user already has a day associated with their account, I want that to be the selected/checked radio button. So if they've previously saved "monday", I'll be getting that from the parent and storing it in the state, and want it to be selected when the page renders.

I was trying to set it up similar to how it's done in the React Forms for select, but it doesn't seem to work for Fieldset. Any ideas?

constructor(props) {
  super(props);
  this.state = {
    reportWeekday: "monday"
  }
}

  handleWeekdayChange(event){
    this.setState({reportWeekday: event.target.value});
    console.log(event.target.value);
  }

  <fieldset className="schedule-weekday" value={this.state.reportWeekday} onChange={this.handleWeekdayChange}>
    <label for="sunday"><input type="radio" name="schedule-weekly-option" value="sunday" id="sunday" />Sunday</label>
    <label for="monday"><input type="radio" name="schedule-weekly-option" value="monday" id="monday" />Monday</label>
    <label for="tuesday"><input type="radio" name="schedule-weekly-option" value="tuesday" id="tuesday" />Tuesday</label>
    <label for="wednesday"><input type="radio" name="schedule-weekly-option" value="wednesday" id="wednesday" />Wednesday</label>
    <label for="thursday"><input type="radio" name="schedule-weekly-option" value="thursday" id="thursday" />Thursday</label>
    <label for="friday"><input type="radio" name="schedule-weekly-option" value="friday" id="friday" />Friday</label>
    <label for="saturday"><input type="radio" name="schedule-weekly-option" value="saturday" id="saturday" />Saturday</label>
  </fieldset>

Solution 1

Here is Jonny's solution without the class properties enabled.

class ControlledRadios extends React.Component{
  constructor(){
    super()
    this.state = {
      reportWeekday: 'monday'
    }
  }

  handleWeekdayChange(event) {
    this.setState({reportWeekday: event.target.value})    
  }

  render() {
    let {reportWeekday} = this.state
    return (<fieldset onChange={this.handleWeekdayChange.bind(this)}>
      <label><input type="radio" name="schedule-weekly-option" value="sunday" checked={reportWeekday === 'sunday'}/>Sunday</label>
      <label><input type="radio" name="schedule-weekly-option" value="monday" checked={reportWeekday === 'monday'}/>Monday</label>
      <label><input type="radio" name="schedule-weekly-option" value="tuesday" checked={reportWeekday === 'tuesday'}/>Tuesday</label>
      <label><input type="radio" name="schedule-weekly-option" value="wednesday" checked={reportWeekday === 'wednesday'}/>Wednesday</label>
      <label><input type="radio" name="schedule-weekly-option" value="thursday" checked={reportWeekday === 'thursday'}/>Thursday</label>
      <label><input type="radio" name="schedule-weekly-option" value="friday" checked={reportWeekday === 'friday'}/>Friday</label>
      <label><input type="radio" name="schedule-weekly-option" value="saturday" checked={reportWeekday === 'saturday'}/>Saturday</label>
    </fieldset>)
    }

}

Solution 2

for those that use UseState hooks, you can do simply this:

    import React, { useState } from 'react';
    
    
    export default function ControlledRadios() {
    const [weekday,setWeekday] = useState("monday")
    
    function handleWeekdayChange(event) {
    setWeekday(event.target.value)
    }
    
    return {
    <fieldset className="schedule-weekday" value={weekday} onChange={(event) => handleWeekdayChange(event)}>
        <label for="sunday"><input type="radio" name="schedule-weekly-option" value="sunday" id="sunday" />Sunday</label>
        <label for="monday"><input type="radio" name="schedule-weekly-option" value="monday" id="monday" />Monday</label>
        <label for="tuesday"><input type="radio" name="schedule-weekly-option" value="tuesday" id="tuesday" />Tuesday</label>
        <label for="wednesday"><input type="radio" name="schedule-weekly-option" value="wednesday" id="wednesday" />Wednesday</label>
        <label for="thursday"><input type="radio" name="schedule-weekly-option" value="thursday" id="thursday" />Thursday</label>
        <label for="friday"><input type="radio" name="schedule-weekly-option" value="friday" id="friday" />Friday</label>
        <label for="saturday"><input type="radio" name="schedule-weekly-option" value="saturday" id="saturday" />Saturday</label>
      </fieldset>
    }

Solution 3

It seems like setting defaultChecked on multiple same-named uncontrolled radio buttons doesn't work as you'd expect and for some reason onChange only fires once per uncontrolled radio button (using [email protected]), so you may have to switch to controlled inputs by setting checked.

class ControlledRadios extends React.Component {
  state = {
    reportWeekday: 'monday'
  }

  handleWeekdayChange = (event) => {
    this.setState({reportWeekday: event.target.value})
  }

  render() {
    let {reportWeekday} = this.state
    return <fieldset onChange={this.handleWeekdayChange}>
      <label><input type="radio" name="schedule-weekly-option" value="sunday" checked={reportWeekday === 'sunday'}/>Sunday</label>
      <label><input type="radio" name="schedule-weekly-option" value="monday" checked={reportWeekday === 'monday'}/>Monday</label>
      <label><input type="radio" name="schedule-weekly-option" value="tuesday" checked={reportWeekday === 'tuesday'}/>Tuesday</label>
      <label><input type="radio" name="schedule-weekly-option" value="wednesday" checked={reportWeekday === 'wednesday'}/>Wednesday</label>
      <label><input type="radio" name="schedule-weekly-option" value="thursday" checked={reportWeekday === 'thursday'}/>Thursday</label>
      <label><input type="radio" name="schedule-weekly-option" value="friday" checked={reportWeekday === 'friday'}/>Friday</label>
      <label><input type="radio" name="schedule-weekly-option" value="saturday" checked={reportWeekday === 'saturday'}/>Saturday</label>
    </fieldset>
  }
}

• Live version

Comments

[Gerard Banasig]

Hello Jonny, I am getting a syntax error: unexpected token on state = { reportWeekday: 'monday' } , I am guessing you enabled class properties which is not yet part of the spec.

[serverpunk]

You need to use the babel-preset-stage-2 preset or the babel-plugin-transform-class-properties plugin (which the preset includes) to enable this syntax.

[Chandradhar Rao]

Excellent..Thanks for this...