How do I pass data to props.children? [duplicate]

Question

Pretty new to react native...

Im trying to loop over my this.props.children in order to pass a string to them which is defined in my parent... is this possible without having those childs defined in the render method ?

<OwnRenderer passMe = "string...">
    <OwnText/>
</OwnRenderer>

The OwnRenderer should pass the prop-string towards all its children... The OwnRenderer does not know which childs he's gonna render, so its not possible to pass the props directly by ""...

I tried to loop over the childs to pass that string directly, but this sadly didn't worked.

this.props.children.map((x) => x.passed = this.props.passMe);

Somehow it just didn't changed the state... how would you guys do this in a easy and understandable way ?

Answer 1

Use React top level api: React.cloneElement

Define

interface Props {
  ChildName: React.ReactElement,
}

{React.cloneElement(ChildName, {
  propsName: {
    propsAttr: value,
    propsAttr2: value,
  }
})}

Usage

<ParentComponent
  ChildName={
    <YourChildComponent />
  }
/>