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