Home » Reactjs » React JSX: Access Props in Quotes

React JSX: Access Props in Quotes

Posted by: admin November 29, 2017 Leave a comment

Questions:

In JSX, how do you reference a value from props from inside a quoted attribute value?

For example:

<img className="image" src="images/{this.props.image}" />

The resulting HTML output is:

<img class="image" src="images/{this.props.image}">
Answers:

React (or JSX) doesn’t support variable interpolation inside an attribute value, but you can put any JS expression inside curly braces as the entire attribute value, so this works:

<img className="image" src={"images/" + this.props.image} />

Questions:
Answers:

If you want to use the es6 string interpolation, you need braces around the tick marks as well:

<img className="image" src={`images/${this.props.image}`} />

Questions:
Answers:

If you’re using JSX with Harmony, you could do this:

<img className="image" src={`images/${this.props.image}`} />

Here you are writing the value of src as an expression.

Questions:
Answers:

Best practices are to add getter method for that :

getImageURI() {
  return "images/" + this.props.image;
}

<img className="image" src={this.getImageURI()} />

Then , if you have more logic later on, you can maintain the code smoothly.

Questions:
Answers:

For People, looking for answers w.r.t to ‘map’ function and dynamic data, here is a working example.

<img src={"http://examole.com/randomview/images" + each_actor['logo']} />

This gives the URL as “http://examole.com/randomview/images/2/dp_pics/182328.jpg” (random example)