Reputation: 171
I'm currently mapping the values of my parent components children in the following way:
const subRows = React.Children.map(this.props.children, (child, i) => {
return child;
});
What I want is to target these children's type values so that I can filter out specific children in the return. Anyone know if there is an easy way to achieve this?
Upvotes: 14
Views: 15989
Reputation: 35501
You access properties on a child via its props
.
If you want to filter the children, you could use React.Children.toArray
to obtain a normal JS array and then use its Array.prototype.filter
method.
const subRows = React.Children.toArray(this.props.children).filter((child, i) => {
return child.props.someProp;
});
Do keep in mind that:
React.Children.toArray()
changes keys to preserve the semantics of nested arrays when flattening lists of children. That is,toArray
prefixes each key in the returned array so that each element's key is scoped to the input array containing it.
You can also use React.Children.forEach
and populate an array available in the outer scope:
const subRows = [];
React.Children.forEach(this.props.children, (child, i) => {
if (child.props.someProp) {
subRows.push(child)
}
});
Upvotes: 18
Reputation: 10503
I've written a library to extend the React Children utilities, where there are functions for filtering and even deep filtering react components
https://fernandopasik.com/react-children-utilities/filter
import React from 'react';
import { filter } from 'react-children-utilities';
const Filtered = ({ children }) => (
<div>
{filter(children, (child) => child.type === 'span')}
</div>
);
Upvotes: 2