React Component children typecheck with typescript

Question

Here is the scenario:

I have a custom component:

class MyComponent extends React.Component {
  render () {
    return (
      
         


        

Answer 1

I would probably declare SuperPropsType.children as:

children: React.ReactElement | React.ReactElement[];

To account for the possibility of having both a single and multiple children.

In any case, as pointed out already, that won't work as expected.

What you could do instead is declare a prop, let's say subComponentProps: SubPropsType1[], to pass down the props you need to create those SubComponent1s, rather than their JSX, and render them inside SuperComponent:

interface SuperPropsType {
  children?: never;
  subComponentProps?: SubPropsType1[];
}

...

const SuperComponent: React.FC = ({ subComponentProps }) => {
  return (
    ...

    { subComponentProps.map(props => ) }

    ...
  );
};