Access props inside quotes in React JSX

javascript reactjs react-props
cantera picture cantera · Feb 10, 2014 · Viewed 110k times · Source

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

Answer

Sophie Alpert picture Sophie Alpert · Feb 10, 2014

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

Related questions

React - TypeError: Cannot read property 'props' of undefined

I'm trying to create a click event be able to delete an item on my list, but when I click it I get "TypeError: Cannot read property 'props' of undefined". I'm trying to stick to ES6 as much as possible, …

Read More
PropTypes in functional stateless component

Without using class, how do I use PropTypes in functional stateless component of react? export const Header = (props) => ( <div>hi</div> )

Read More
React propTypes component class?

How can I validate that the supplied prop is a component class (not instance)? e.g. export default class TimelineWithPicker extends React.PureComponent { static propTypes = { component: PropTypes.any, // <-- how can I validate that this is a component class (…

Read More