React component is changing an uncontrolled input of type checkbox

Question

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?

You can try: checked={Boolean(props.isChecked)}

HMR
– HMR

2020-05-06 15:33:20 +00:00
Commented May 6, 2020 at 15:33 — HMR
– HMR, Commented May 6, 2020 at 15:33

HermitCrab · Accepted Answer · 2020-05-06 15:43:07Z

6

props.isChecked is probably null or undefined, you can solve it like this:

checked={props.isChecked || false}

answered May 6, 2020 at 15:43

HermitCrab

3,2641 gold badge14 silver badges10 bronze badges

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

Comments

Sahil Paudel · Accepted Answer · 2020-05-06 15:54:42Z

Warning: A component is changing an uncontrolled input of type checkbox to be controlled

If you are getting this error, it means that the value you are providing to the input field is not updated by your onChange function.

The value state that is assigned to any input should be only modified through the onChange function else you get this warning.

It is also possible that the value is undefined as soon as the onChange action is performed.

As of your case declare

isChecked as a boolean with initial value as false or true as you like.

If you are using hook

const [isChecked, setIsChecked] = React.useState(false);

for class component

this.state = {
   isChecked: false
}

Here is the working code in code sandbox code

Collectives™ on Stack Overflow

React component is changing an uncontrolled input of type checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related