CODEWITHSUNDEEP
reactjsreact-native
Pavan
Pavan

Reputation: 1015

How to Render Component sent as a Prop

I've a component like <A componentAsProps={<Text>Some Text</Text>} />

How to render componentAsProps in render method

Upvotes: 1

Views: 65

Answers (3)

Pavan
Pavan

Reputation: 1015

I found the answer all I need to do it {this.props.componentAsProps} in render method of child component

Upvotes: 0

soupette
soupette

Reputation: 1280

You can do something this :

renderChildCompo = () => <Text>Some text</Text>;

render() {
 return (
   <A componentAsProps={this.renderChildCompo} />
 );
}
// ...

And in your ./A/index.js file

render() {
 return (
  {this.props.componentAsProps()}
 );
}

Upvotes: 4

Marco
Marco

Reputation: 527

You can just pass a component as children:

Parent component:

<ChildComponent>
     <Text>Some Text</Text>
</ChildComponent>

Child component:

class ChildComponent extends Component {
    render() {
        return (
            <View>
                {this.props.children}
            </View>
        );
    }
}

OR you can pass a value as prop and use it like this:

Parent component:

<ChildComponent text="Some Text" />

Child component:

<Text>{this.props.text}</Text>

Upvotes: 1

Related Questions