React JSX concat multiple {this.state} {this.props}

Question

{this.state.userFirst} //returns anime
{this.props.firstPlace} //returns netflix
{this.props.provider[0].netflixAnimeT //returns 495

My current Code is...

<p>
  {this.Capitalize(this.props.firstPlace)} has
  {`this.props.provider[0].${this.props.firstPlace}${this.Capitalize(
    this.state.userFirst || ""
  )}T`}
  {this.state.userFirst}
</p>;

Capitalize (str){
  return str.charAt(0).toUpperCase() + str.slice(1)
}

Currently outputs:

Netflix has this.props.provider[0].netflixAnimeT anime

However, I want output of:

Netflix has 495 anime

As I want it dynamic based on user ratings etc, how should I change my code in JSX? Thank you.

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — keikai, Mar 19 '20 at 14:49
I think you're just confused about JS object notation--you need to use bracket notation if you're dynamically accessing a property. Right now you're asking for a double-evaluation and that's not how it works. — Dave Newton, Mar 19 '20 at 14:56
``{this.props.provider[0][`${this.props.firstPlace}${this.Capitalize( this.state.userFirst || "" )}T`]}`` — Emile Bergeron, Mar 19 '20 at 15:16
@EmileBergeron perfect How do I choose yours as answer? This works perfectly. — YLO, Mar 19 '20 at 15:18

Luan Nico · Answer 1 · 2020-03-19T23:16:37.213

-1

Just replace

{`this.props.provider[0].${this.props.firstPlace}${this.Capitalize(
  this.state.userFirst || ""
)}T`}

with

{this.props.provider[0].${this.props.firstPlace}${this.Capitalize(
  this.state.userFirst || ""
)}T}

The backtick makes it a literal string. You can also do

`${var} literal`

EDIT I missed some nuances about it, but this should work:

{`${this.props.provider[0]}.${this.props.firstPlace}${this.Capitalize(
  this.state.userFirst || ""
)}T`}

edited Mar 19 '20 at 23:16

answered Mar 19 '20 at 14:59

Luan Nico

5,376
2
30
60

I tried this and got parsing error: unexpected token, expected "}" – YLO Mar 19 '20 at 15:06
1

This won't work either – Dave Newton Mar 19 '20 at 15:09

React JSX concat multiple {this.state} {this.props}

1 Answers1