HomeGuidesTypeScript & React

TypeScript and React: Children

Stefan Baumgartner

Written by @ddprrt

More on TypeScript

JSX elements can be nested, like HTML elements. In React, children elements are accessible via the children props in each component. With TypeScript, we have the possibilty to make children type safe.

  1. Default behaviour

Default behaviour #

Once you have the default types installed, we already get autocompletion and code analysis out of the box. In class components, we get this even without using any TypeScript specific syntax:

import React, { Component } from 'react';

export class Wrapper extends Component {
render() {
return <div style={ { display: 'flex' } }>
{ this.props.children }
</div>
}
}

Tools like Visual Studio Code already help:

Auto-completion for children

For functional components, we need to use the FunctionComponent generic type to access children. Check out the example we had earlier:

import React, { FunctionComponent } from 'react';

type CardProps = {
title: string,
paragraph: string
}

// we can use children even though we haven't defined them in our CardProps
export const Card: FunctionComponent<CardProps> = ({ title, paragraph, children }) => <aside>
<h2>{ title }</h2>
<p>
{ paragraph }
</p>
{ children }
</aside>

Note that we use destructring here to access our properties directly. You have to be explicit that you want to access children as well. If you don’t use destructuring, the code looks like this:

import React, { FunctionComponent } from 'react';

// no children defined here
type CardProps = {
title: string,
paragraph: string
}

// undestructured
export const Card: FunctionComponent<CardProps> = (props) => <aside>
<h2>{ props.title }</h2>
<p>
{ props.paragraph }
</p>
{ /* still in our props */ }
{ props.children }
</aside>

Stay up to date!

3-4 updates per month, no tracking, spam-free, hand-crafted. Our newsletter gives you links, updates on fettblog.eu, conference talks, coding soundtracks, and much more.