Part 3 of a React sub-components series addresses a regression introduced in Part 2, where non-sub-component children could still be rendered inside a parent component. The fix uses Flow static typing to whitelist only valid sub-components as children of the Article component. Sub-components are converted from functional components to classes (required for Flow type inference), and a union type ArticleSubComponents is declared. This type is then applied to the children prop, so Flow will report an error if any non-whitelisted element is used as a child. The approach integrates with CI pipelines and editor extensions for enforcement.

6m read timeFrom blog.maximeheckel.com
Post cover image
Table of contents
Current issueFlow to the rescueHow to achieve whitelisting with Flow
32 Impressions