TypeScript and React - children type?

Question

I have a very simple functional component as follows:

import * as React from \'react\';

export interface AuxProps  { 
    children: React.ReactNode
 }


con         


        

Answer 1

In order to use in your JSX, it needs to be a function that returns ReactElement | null. That's the definition of a function component.

However, it's currently defined as a function that returns React.ReactNode, which is a much wider type. As React typings say:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

Make sure the unwanted types are neutralized by wrapping the returned value into React Fragment (<>):

const aux: React.FC = props =>
  <>{props.children};