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}"> 
Add a comment |
10 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} /> 
2 Comments
David Lavieri
what about backtips in es6?
Ian Kemp - SO dead by AI greed
@DavidLavieri See Cristi's answer stackoverflow.com/a/30061326/70345 below.
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}`} /> 
2 Comments
zloctb
future ES6 Template literals
Jon Schneider
The string enclosed by backticks is a "template literal": developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
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.
2 Comments
holms
this is something that's hard to find. and for reusable containers this is a-must-know
Serhii Hrynko
Just so that people don't get confused with mentioning of Harmony, this is a part of ES6 standard, while answer is dated few months before it became a standard.
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`} 
Comments
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.
answered Feb 20, 2017 at 19:58
Abdennour TOUMI
94.6k42 gold badges271 silver badges274 bronze badges
Comments
You can do like this
<img className="img" src=`images/${this.props.image}`> Comments
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)
Comments
Note: In react you can put javascript expression inside curly bracket. We can use this property in this example.
Note: give one look to below example:
class LoginForm extends React.Component { constructor(props) { super(props); this.state = {i:1}; } handleClick() { this.setState(prevState => ({i : prevState.i + 1})); console.log(this.state.j); } render() { return ( <div> <p onClick={this.handleClick.bind(this)}>Click to change image</p> <img src={'images/back'+ this.state.i+'.jpg'}/> </div> ); } } 
Comments
Here is the Best Option for Dynamic className or Props , just do some concatenation like we do in Javascript.
className={ "badge " + (this.props.value ? "badge-primary " : "badge-danger ") + " m-4" } 1 Comment
David Lavieri
I'd recommend uses
classnames package for building dynamic classNamesyou can use
<img className="image" src=`images/${this.props.image}`> or
<img className="image" src={'images/'+this.props.image}> or
render() { let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image'; return ( <div> <img className="image" src={imageUrl} /> </div> ) } 