mercredi 6 mai 2020

React component is changing an uncontrolled input of type checkbox

Having the following React Component for Custom Checkbox where values are passed down as props from parent

export const CheckBox = (props) => {
  let closeClass;

  if (!props.hint && props.hint == "") {
    closeClass = "no-hint";
  }
  return (
    <div className={"field-wrapper checkbox-button-grouped"}>
      <label htmlFor={`checkbox_${props.value}`}>
        <input
          onChange={props.handleCheckChieldElement}
          type="checkbox"
          name={props.name}
          id={`checkbox_${props.value}`}
          className={"input-field"}
          checked={props.isChecked}
          value={props.value || ""}
        />
        <div className="label-text">
          <div className={"label-name"}>{props.label}</div>
          {props.hint && props.hint !== "" ? (
            <div className={"info-icon"}>
              <InfoIcon className={"info-icon"} />
            </div>
          ) : null}
          <div className={"hint"}>{props.hint}</div>
          <UncheckIcon className={classnames("uncheck", closeClass)} />
          <Checkmark className={"ok-icon"} />
        </div>
      </label>
    </div>
  );
};

export default CheckBox;

I keep getting the following error

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

What I'm doing wrong in this case?




Aucun commentaire:

Enregistrer un commentaire