2

In my React/Typescript project, I need a Component, lets call that A (it is a functional component), which is simply a wrapper component and needs to accept and display two components that I have made (lets call them B and C) so that A can be used as the following:

<A>
 <B/>
 <C/>
</A>

I need to ensure that only B and C are passed as children of A and nothing else.

How can I achieve this in typescript?

Ahmed Ateeq
  • 61
  • 4

1 Answers1

3

Something like this maybe?

interface AppProps {
  children: [React.ReactNode, React.ReactNode];
}

If you want to go further to check what those types are that maybe trickier, if possible at all.

Giorgi Moniava
  • 27,046
  • 9
  • 53
  • 90
  • Uhh, yeah i was hoping to strongly type the children to be of a specific type. For example: children: ReactElement This doesn't really work tho and passing anything other than B or C will still work (also mentioned in the link you've shared). – Ahmed Ateeq Nov 16 '22 at 07:53