How to iterate through a Component's Children in Typescript React?

Question

How do I iterate through a React component's children in Typescript tsx?

The following would be valid jsx:

public render() {     return (         <div>             {React.Children.map(this.props.children, x => x.props.foo)}         </div>     ); } 

However, in Typescript, the type of x is React.ReactElement<any> so I have no access to props. Is there some kind of casting that I need to do?

Answer 1

Using any should generally be avoided as you're losing the type info.

Instead use React.ReactElement<P> in the function parameter type:

React.Children.map(this.props.children, (child: React.ReactElement<ChildPropTypes>) => child.props.bar)