CODEWITHSUNDEEP
react-native
Sick Ranchez
Sick Ranchez

Reputation: 228

How to render element wrappers dynamically in React Native

Let's say I have too many wrapper components A, B, C .....

Sometimes I want to render 

    <A>
      <Text>{this.state.myText}</Text>
   </A>

And some other times I want to render 

   <B>
      <Text>{this.state.myText}</Text>
   </B>

....

....

....

How to achieve something like this? 

{this.bringTheRightComponentTag(this.state.wrapperComponent)}
          <Text>{this.state.myText}</Text>
{this.bringTheRightComponentClosingTag(this.state.wrapperComponent)}

This is a minimized example. I just need to learn the logic.

Upvotes: 0

Views: 297

Answers (1)

Muhammed Anees
Muhammed Anees

Reputation: 1850

React actually allows you to assign the component to a variable during runtime( Docs here). So you can do something like,

  const SelectedComponent = true ? A : B

  return (
    <SelectedComponent>
      {this.state.myText}
    </SelectedComponent>
  )

Upvotes: 2

Related Questions