Access props inside quotes in React JSX

javascript, react-props, reactjs

Solution

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

Problem

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}"> ```

Original source