mercredi 5 avril 2023

Property 'checked' does not exist on type 'EventTarget | (EventTarget & HTMLInputElement)' React

I have parent component SelectBoxGroup and child component SelectBox. I wanted to add the select all option to the SelectBoxGroup. But i got this error;

Property 'checked' does not exist on type 'EventTarget | (EventTarget & HTMLInputElement)'. Property 'checked' does not exist on type 'EventTarget'

.

function SelectBox({
  ...
}: React.HTMLAttributes<HTMLInputElement> & SelectBoxProps) {

  const { register } = useFormContext();
  const { ref, ...rest } = register(name, {
    onChange,
  });

  return (
    <div>
      <input
            type="checkbox"
            checked={isChecked}
            value={value}
            {...props}
            {...rest}
       />
          <label>{label}</label>
    </div>
  );
}
export function SelectBoxGroup({
  ...
}: React.HTMLAttributes<HTMLInputElement> & SelectBoxGroupProps) {
  
  const [checkAllChecked, setCheckAllChecked] = useState(false);

  function handleCheckAll(checked: boolean) {
    setCheckAllChecked(checked);
    onChangeHandler?.(
      options.map(option => ({
        ...option,
        isChecked: checked,
      }))
    );
  }
  return (
    <div>
      {showCheckAll && (
        <SelectBox
          id={'check-all}
          isChecked={checkAllChecked}
          onChange={e => handleCheckAll(e.target.checked)} ////ERROR IS HERE
          label="Check all"
          value="Check all"
          name={""}
        />
      )}
      <div
        role="group"
      >
        {options?.map((option, index) => (
          <SelectBox
            key={option.value}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              onChangeHandler?.(e);
            }}
            name={name}
            label={option.label}
            value={option.value}
          />
        ))}
      </div>
    </div>
  );
}



Aucun commentaire:

Enregistrer un commentaire