Access props inside quotes in React JSX

Access props inside quotes in React JSX

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

The resulting HTML output is:

Solutions/Answers:

Solution 1:

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} />

Solution 2:

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

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

Solution 3:

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.

Solution 4:

Instead of adding variables and strings, you can use the ES6 template strings!
Here is an example:

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

As for all other JavaScript components inside JSX, use template strings inside of curly braces. To “inject” a variable use a dollar sign followed by curly braces containing the variable you would like to inject. For example:

{`string ${variable} another string`}

Solution 5:

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.

Related:  Jquery : Refresh/Reload the page on clicking a button

Solution 6:

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)