Почему объект события недоступен, когда я оборачиваю две функции в анонимную функцию в обработчике отправки?

Итак, я обернул две функции в обработчик onClick следующим образом:

const PlannerDetailsFooter = (props) => {
 const [checked, setChecked] = useState(false);
 const handleChange = () => {
 setChecked((prev) =>!prev);
 };
 return (
 <div className="details-footer w-full p-4 bottom-0 absolute border-t-1">
 {props.emailConfig.isHidden? null:
  <button id="mail-button"
  
  onClick={() => {props.emailHandler(); handleChange()}}
 >{props.emailConfig.buttonText}</button>
 </div>
 )
}

Это одна из двух вызываемых функций, которая находится в родительском компоненте.

 const emailHandler = (event) => {
 if (event.target.id === "mail-button") {
 setEmailConfig({...emailConfig, isHidden: false, buttonText: 'Send Now'})
 } else {
 setEmailConfig(event.target.value)
 }
 }

Теперь я получаю ошибку

Невозможно прочитать свойства неопределенного (чтение «цель»)

Используя это решение, обработчик в родительском компоненте может получить доступ к объекту события:

onClick={props.emailHandler}

Решение проблемы

Когда вы используете onClick={props.emailHandler}, вы привязываете emailHandler к onclick, и он получит параметры, переданные onclick.

Теперь, когда вы используете, () => {props.emailHandler();...}вы не передаете параметры в emailHandler. Чтобы исправить это, вы можете сделать(e) => {props.emailHandler(e);...}