setting defaultChecked in radio button is not working in react

Question

I need to set the defaultChecked on page load which can later be changed by the user

<input
  ref={(element) => (this['input' + item.key] = element)}
  name={item.key}
  placeholder='Config value'
  defaultChecked={item.value === true}
  value='true'
  type='radio'
  onChange={(event) => this.validateCValue(event.target.value, item)}
/>
<label> True</label>

ludwiguer · Accepted Answer · 2020-06-24 19:53:29Z

0

Radio inputs can only be checked but not unchecked, if you set it to true, the user will not be able to uncheck it, maybe you meant to use a checkbox?

const [checked, setChecked] = useState(true);
  const handleChange = () => {
    setChecked(checked => !checked);
  };

  return (
    <div className="App">
      <input
        placeholder="Config value"
        defaultChecked={checked}
        type="checkbox"
        onChange={handleChange}
      />
      <label>{checked ? "checked" : "not checked"}</label>
    </div>
  );

answered Jun 24, 2020 at 19:53

ludwiguer

2,2552 gold badges17 silver badges21 bronze badges

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

2 Comments

Asha Aradhya Over a year ago

Thanks .. defaultChecked={checked} this line helped me understand on what i was doing wrong..now it worked

Siklab.ph Over a year ago

Yeah, that's weird. I encountered a similar problem, after hours of trial and error, I simply had to change my code from defaultChecked={value === 'string'} to defaultChecked={value === 'string' ? "true" : "false"}

AYUSH CHAUDHARY · Accepted Answer · 2022-04-15 06:18:31Z

0

this works for me use "checked" tp set radio button default value

<div onChange={this.sethandleValueChange.bind(this)} className={` ${(this.state.IsControlSet && this.state.RadioBtnVal=="" ? styles.control_border_red : "")}`}>
<input type="radio" value="Yes" name="RadioBtnVal" checked={this.state.RadioBtnVal=="Yes"} disabled={(this.state.FormName!="View") ? false : true}/> Yes<br/>
<input type="radio" value="No" name="RadioBtnVal" checked={this.state.RadioBtnVal==="No"} disabled={(this.state.FormName!="View") ? false : true}/> No
</div>

answered Apr 15, 2022 at 6:18

AYUSH CHAUDHARY

557 bronze badges

Collectives™ on Stack Overflow

setting defaultChecked in radio button is not working in react

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related