ReactJS отключение формы, если установлен флажок

Question

У меня есть флажок. Если флажок установлен, форма должна закрыться. Но это не работает для меня. У меня есть следующий код:

const [IsChacked, setIsChacked] = useState(false);

const onChangeParams = (name, setChackedValue, defaultChecked) => {
    if (name === "foreign_citizen") {
        let value = defaultChecked.target.value;           
        setChackedValue(name, value)
        if (parseInt(value) === 1) {
            setIsChacked(true);
        }
    }
};

И моя форма выглядит следующим образом:

<Form.Check
  onChange={(e => onChangeParams("foreign_citizen", e, setChackedValue))}
  name="foreign_citizen"
  defaultChecked={values.foreign_citizen}
  isInvalid={touched.foreign_citizen && !!errors.foreign_citizen}
  type="checkbox"
  label="Наличие паспорта в деле"   />



{IsChacked ? (< > Dos something here</>) : ( <></>)}

Если я поставил флажок, это выдает ошибку: TypeError: Невозможно прочитать свойство 'target' из неопределенного

Так где я не прав? Я не плохо понимаю ...

Answer 1

onChange={(e => onChangeParams("foreign_citizen", e, setChackedValue))} здесь объект события является вторым параметром

const onChangeParams = (name, setChackedValue, defaultChecked) => {
    if (name === "foreign_citizen") {
        let value = defaultChecked.target.value; 

, но выше объект события является третьим параметром

попробуйте изменить onChange={(e => onChangeParams("foreign_citizen", setChackedValue, e,))}

Также необходимо заключить Форма в Fragemnt

 return (
    <>
      <Form.Check
        onChange={(e => onChangeParams("foreign_citizen", setChackedValue, e,))}
        name="foreign_citizen"
        defaultChecked={values.foreign_citizen}
        isInvalid={touched.foreign_citizen && !!errors.foreign_citizen}
        type="checkbox"
        label="Наличие паспорта в деле"
      />
      {IsChacked ? <> Dos something here</> : <></>}
    </>
  );

Аналогичные коды и коробка - https://codesandbox.io/s/pedantic-blackwell-e7uhy