How can I give props to a typescript component that is being passed as a props in react?

Question

I have a component 'Modal.tsx' that I want to consume content from another component, similar to the below.

<Modal onClose={() => setShowModal(false)} Content={ConfirmationContent} />

ConfirmationContent lives in its own ConfirmationContent.tsx file which imported in to the the Modal.tsx file.

I can display content from the ConfirmationContent component successfully within Modal.tsx

type Props = {
  showModal : boolean,
  Content: React.ElementType,
}
const Modal = ({showModal, Content} : Props) => { 
  return (
    <div><Content /></div>
  )
}

But what I 'd really like to do is pass props from the parent of Modal.tsx in to ConfirmationContent, kinda like this ..

<Modal onClose={() => setShowModal(false)} Content={ConfirmationContent={text='hotpotato' closeModal={false} } />

But I'm struggling to understand how to do this - Could it be the React.ElementType ?

Any help or advice here would be truly appreciated.

Answer 1

Change content to children this way:

type Props = {
  showModal : boolean,
  children?: React.ReactNode,
}
const Modal = ({showModal, children} : Props) => { 
  return (
    <div>{children}</div>
  )
}

And then you can pass props you'd like this way:

<Modal onClose={() => setShowModal(false)}>
    <ConfirmationContent onClose={() => {//...}} text="foo" >
</Modal>