how to set a component in react-modal?

Question

I'm refactoring all the modals in a business project and I don't want to waste a part of the previous code.

I've to use react-modal library.

this is the original component before the introduction of react-modal

function Detail({
  title, supervisor, architect, initiator, id, cost, description, chipText, configurationElement,
}) {
  return (
      <div className={styles.blueBackground}>
        <div className={styles.container}>
          <Header title={title} />
          <BlueLightRow cost={cost} id={id} chipText={chipText} />
          <DetailSection
            supervisor={supervisor}
            architect={architect}
            claimant={initiator}
            description={description}
            configurationElement={configurationElement}
          />
        </div>
      </div>
  );
}

We Called the component Detail when the user click on card.

now in a father component I use these lines

{
 modalState ? <Modal isOpen={modalState} afterOpenModal={afterOpenModal} onRequestClose={() => setModalState(false)} ariaHideApp={false} /> : null
}

the idea is to pass/or render the entire Detail component when the modalState is true.

Problem

I cannot figure how to pass the component Detail to react-modal. I tried to read the documentation but I wasn't able to find something linked to this case.

just in case this is the link to the documentation.

Answer 1

Pass detail as a child of Modal

{modalState ? 
   (<Modal 
      isOpen={modalState} 
      afterOpenModal={afterOpenModal} 
      onRequestClose={() => setModalState(false)} 
      ariaHideApp={false}
    > 
      <Detail />
    />) : null
}