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>

Hi skyshine did you have any luck integrating a solution?

Cat_Enthusiast
– Cat_Enthusiast

2019-07-25 05:37:09 +00:00
Commented Jul 25, 2019 at 5:37 — Cat_Enthusiast
– Cat_Enthusiast, Commented Jul 25, 2019 at 5:37

Mohit Mutha · Accepted Answer · 2020-10-19 09:17:39Z

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>

edited Oct 19, 2020 at 9:17

answered Jul 24, 2019 at 9:23

Mohit Mutha

3,00117 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cat_Enthusiast · Accepted Answer · 2019-07-25 06:23:05Z

0

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>

edited Jul 25, 2019 at 6:23

answered Jul 24, 2019 at 9:22

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

1 Comment

skyshine Over a year ago

whatever code i have written that is working, i did one mistake, it should be like this <Text style={{marginTop : 15}}>

dcangulo · Accepted Answer · 2019-07-25 07:03:07Z

0

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>

answered Jul 25, 2019 at 7:03

dcangulo

2,1352 gold badges25 silver badges55 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related