Buscando una solución para obtener una propiedad de una instancia de React.Compomnent , pero parece ser ilegible.

Este es mi componente hijo:

 export default class TabItem extends Component { id: string = ''; getId(): string { return this.id; } constructor(props) { super(props); this.id = Math.random().toString(); } render() { return ( <> {this.props.children} </> ); } };

Componente principal:

 export default class Tabs extends Component { render() { return ( <div> <div> {this.props.children && this.props.children.map ? this.props.children.map((child, i) => { console.log(['AAA', child.id, child.getId()]); return ( <div className={classname} key={i} >{child.caption}</div> ) }) : ''} </div> </div> ); } };

Yo uso ambos así:

 <Tabs> <TabItem caption={'Booking'} > AAA </TabItem> <TabItem caption={'Fitting'} > BBB </TabItem> </Tabs>

Pero me sale este error:

TypeError: child.getId no es una función

y child.id = undefined .

¿Qué me estoy perdiendo?