Filtering React Children

A Short Note on Applying a Filter for React Children.

Mar 11, 2021 · 1 min read

Trying to filter React children based in a name or type of the child is a tricky option.

The main problem resides on the idea of using a function’s name to distinguish between kinds or types. The problem arises when you try it on a minimized version. The name of the function is no longer what you expected..

To solve this problem, we can add a simple default prop to keep track of the differentiator

function Item () {}

Item.defaultProps = {
  __type : “Item”
}

Now we can filter children using a filter function:

React.Children.toArray(children).filter(itemsOnly)

function itemsOnly (child) {
  return child.props.__type === “Items”
}

Any viewpoints and opinions expressed in this article are my own and do not, in any way, reflect those of my employer, my colleagues, or anyone else. I speak only for myself, not for them.