React 16 Tooling

Parents with an optional child

Always requiring a child component isn't necessary and can actually cause headaches. For example, what if there is nothing to render because nothing was returned from the API? Here's an example of how to specify that a child is optional using Flow syntax:

// @flow
import * as React from 'react';
import Child from './Child';
 
type Props = {
  children?: React.Element<Child>,
};
 
const ParentWithOptionalChild = ({ children }: Props) => (
  <section>
    <h2>Parent With Optional Child</h2>
    {children}
  </section>
);
 
export default ParentWithOptionalChild;

This looks a lot like a React component that requires a specific type of element. The difference is with the question mark: children?. This means that either a child component ...