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

As a type that contains children, I'm using:

type ChildrenContainer = Pick

This children container type is generic enough to support all the different cases and also aligned with the ReactJS API.

So, for your example it would be something like:

const layout = ({ children }: ChildrenContainer) => (
    
        
Toolbar, SideDrawer, Backdrop
        

            {children}
        
    
)