компонент ModalUI имеет код export const ModalUI: FC<TModalUIProps> = memo( ({ title, onClose, children }) => ( <> <div className={styles.modal}> <div className={styles

Вопрос пользователя:

компонент ModalUI имеет код export const ModalUI: FC<TModalUIProps> = memo( ({ title, onClose, children }) => ( <> <div className={styles.modal}> <div className={styles.header}> <h3 className={`${styles.title} text text_type_main-large`}> {title} </h3> <button className={styles.button} type='button'> <CloseIcon type='primary' onClick={onClose} /> </button> </div> <div className={styles.content}>{children}</div> </div> <ModalOverlayUI onClick={onClose} /> </> ) ); компонент Modal имеет код: export const Modal: FC<TModalProps> = memo(({ title, onClose, children }) => { useEffect(() => { const handleEsc = (e: KeyboardEvent) => { e.key === 'Escape' && onClose(); }; document.addEventListener('keydown', handleEsc); return () => { document.removeEventListener('keydown', handleEsc); }; }, [onClose]); return ReactDOM.createPortal( <ModalUI title={title} onClose={onClose}> {children} </ModalUI>, modalRoot as HTMLDivElement ); }); как изменить компонент app чтобы компонент <IngredientDetails /> обернутый в Modal закрывался по клику на кнопку закрытия

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

Для того чтобы компонент <IngredientDetails /> обернутый в Modal закрывался по клику на кнопку закрытия, вам нужно добавить обработчик события onClick на кнопку закрытия в компоненте ModalUI.

Вам нужно изменить код компонента ModalUI следующим образом:

export const ModalUI: FC<TModalUIProps> = memo(
  ({ title, onClose, children }) => (
    <>
      <div className={styles.modal}>
        <div className={styles.header}>
          <h3 className={`${styles.title} text text_type_main-large`}>
            {title}
          </h3>
          <button className={styles.button} type='button' onClick={onClose}>
            <CloseIcon type='primary' />
          </button>
        </div>
        <div className={styles.content}>{children}</div>
      </div>
      <ModalOverlayUI onClick={onClose} />
    </>
  )
);

Теперь, когда пользователь кликнет на кнопку закрытия в компоненте ModalUI, функция onClose будет вызвана и Modal будет закрыт.

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

export const ModalUI: FC<TModalUIProps> = memo(
  ({ title, onClose, children }) => (
    <>
      <div className={styles.modal}>
        <div className={styles.header}>
          <h3 className={`${styles.title} text text_type_main-large`}>
            {title}
          </h3>
          <button className={styles.button} type='button' onClick={onClose}>
            <CloseIcon type='primary' />
          </button>
        </div>
        <div className={styles.content}>{children}</div>
      </div>
      <ModalOverlayUI onClick={onClose} />
    </>
  )
);

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: