React Property does not exist on type 'IntrinsicAttributes' (custom hook)

Question

i have a custom hook to show a modal, but get

Type '{ children: Element; modalOpen: boolean; onClose: () => void; }' is not assignable to type 'IntrinsicAttributes & { children: any; }'.
  Property 'modalOpen' does not exist on type 'IntrinsicAttributes & { children: any; }'.

My custom hook:

import React, { useState, HTMLProps } from 'react';
import styled from 'styled-components';
import AriaModal from 'react-aria-modal';

type ModalWrapperProps = HTMLProps<HTMLDivElement> & {
  large: boolean;
  formModal?: boolean;
};

const ModalWrapper = styled(ContainerBoxShadow).attrs({ className: 'ModalWrapper' })`
  ${(_: ModalWrapperProps) => ''}
  width: ${props => (props.formModal ? '80vw' : '90vw')};
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;

  @media ${props => props.theme.devices.medium} {
    width: ${props => (props.large ? '80vw' : '50vw')};
    max-height: 80vh;
  }

  @media ${props => props.theme.devices.large} {
    width: ${props => (props.large ? '80vw' : '40vw')};
  }

  @media ${props => props.theme.devices.laptop} {
    width: ${props => (props.large ? '80vw' : '30vw')};
  }
`;

const ModalCloseButton = styled(ButtonClosePrimary).attrs({ className: 'ModalCloseButton' })`
  margin-bottom: 2rem;
  float: right;
`;

const useModal = () => {
  const [modalOpen, setModalOpen] = useState(false);

  const ModalComponent = ({ children }, large, formModal) => {
    return (
      <AriaModal onExit={setModalOpen(false)} alert focusDialog titleId="modal-title" verticallyCenter>
        <ModalWrapper large={large} formModal={formModal}>
          <div>
            <ModalCloseButton onClick={() => setModalOpen(false)}></ModalCloseButton>
          </div>
          {children}
        </ModalWrapper>
      </AriaModal>
    );
  };

  return {
    ModalComponent,
    modalOpen,
    setModalOpen,
  };
};

export default useModal;

And then i call it in another file (buttonPage):

const ProfileDataPage = () => {
  const { ModalComponent, modalOpen, setModalOpen } = useModal();

  return (
    <ButtonAccentPrimary tabIndex={0} onClick={() => setModalOpen(true)}>
      some button text
    </ButtonAccentPrimary>


    <ModalComponent modalOpen={modalOpen} onClose={() => setModalOpen(false)}>
      <myPage />
    </ModalComponent>
  );
};

Expected behavior: When i get on the page, lets call it ButtonPage, and click my button, my modal should come up and i should be able to close it again.

Actual behavior: when i get on ButtonPage, modal is already opened and i can't close it.

I should point out that the error occurs on the ModalComponent

Ernesto Hegi · Accepted Answer · 2020-02-13 12:35:38Z

2

const ModalComponent = ({ children }, large, formModal) => {

The problem here seems to be { children } contains all the props you are passing to your ModalComponent, can you try using just the children prop instead, as in:

const ModalComponent = (children, large, formModal) => {

answered Feb 13, 2020 at 12:35

Ernesto Hegi

3333 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Linexxlol Over a year ago

I get this error: Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {modalOpen, onClose, children}). If you meant to render a collection of children, use an array instead.

Collectives™ on Stack Overflow

React Property does not exist on type 'IntrinsicAttributes' (custom hook)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related