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>

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>

• javascript
• forms
• reactjs
• radio-button

• 1 I'm not sure I have a great answer for your question, but I do want to comment to let you know that passing in your initial state as a prop is generally not considered a great idea: see here for more details. You probably want to set that initial state information up in componentDidMount() instead. Hope that helps! – yoursweater Commented Jun 15, 2017 at 22:45

3 Answers 3

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>)
    }

}

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>
    }

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