How to iterate through a component of children in Typescript Responsive?

Question

How to iterate through React child components in Typescript tsx?

The following would be true: jsx:

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

However, in Typescript, type x is equal to React.ReactElement<any> , so I do not have access to the details. Are there any castings I need to do?

Answer 1

However, in Typescript, the type x is React.ReactElement, so I don't have access to the details. Are there any castings I need to do?

Yes. Also prefer the term assertion . Quick:

 React.Children.map(this.props.children, x => (x as any).props.foo)