React-Native - How to concat two strings inside JSX element

Question

Actually i am getting values from props, I need to concat those values and put in JSX text element. But i am trying to appending it is not working. Is there any way to make this happen. I don't want to create any other variable to concat.

Code :

 <Text style={{marginTop = 15}}>{this.props.userinfo.token+this.props.userInfo.loggedin}</Text> 

Answer 1

You can render them separately

 <Text style={{marginTop = 15}}>
   {this.props.userinfo.token}{this.props.userInfo.loggedin}
 </Text> 

OR

 <Text style={{marginTop = 15}}>
   {`${this.props.userinfo.token}${this.props.userInfo.loggedin}`}
 </Text> 

Answer 2

userinfo !== userInfo

 <Text style={{marginTop: 15}}>
   {this.props.userInfo.token + this.props.userInfo.loggedin}
 </Text> 

You might also just have to verify that the props are active before trying to render them.

 <Text style={{marginTop: 15}}>
   { this.props.userInfo.token && this.props.userInfo.loggedIn ? (
      this.props.userInfo.token + this.props.userInfo.loggedin
    ) : (
      ""
   )}
 </Text> 

Answer 3

While the answers above are correct.

I just want to share that you can also do the following:

<Text style={{marginTop: 15}}>
  {this.props.userinfo.token.concat(this.props.userInfo.loggedin)}
</Text> 

Just make sure that this.props.userinfo isn't undefined nor null and has token and loggedin property.

And also this:

<Text style={{marginTop: 15}}>
  {`${this.props.userinfo.token}${this.props.userInfo.loggedin}`}
</Text>