vendredi 17 avril 2020

checked={false} changing a controlled input of type checkbox to be uncontroled input

the following code returns the error : A component is changing a controlled input of type checkbox to be uncontrolled.

function CheckBox(props) {
 const id = props.id;
 const onChange = props.onChange;
 const flag = props.flag;
 const lock = props.lock;

if (lock === true) {
return (
  <React.Fragment>
    <input className="tgl tgl-skewed" id={id} type="checkbox" onChange={onChange} />
    <label className="tgl-btn" data-tg-off={flag + " is OFF"} data-tg-on={flag + " is ON"} htmlFor={id}></label>
  </React.Fragment>
)
} else {
return (
  <React.Fragment>
    <input className="tgl tgl-skewed" id={id} type="checkbox" disabled="disabled" checked={false} value={false}/>
    <label className="tgl-btn" data-tg-off={flag + " is OFF"} data-tg-on={flag + " is ON"} htmlFor={id}></label>
  </React.Fragment>
)}}

the error disappears when I remove "checked={false}" but I need it ...

any solutions ?




Aucun commentaire:

Enregistrer un commentaire