[FIXED] How do I dynamically set HTML5 data- attributes using react?

Issue

I'd like to render an HTML5 attribute of a <select> input so that I can use jquery image picker with react. My code is:

var Book = React.createClass({
    render: function() {
        return (
            <option data-img-src="{this.props.imageUrl}" value="1">{this.props.title}</option>

The issue is that even though {this.props.imageUrl} is getting properly passed as a prop, it isn't rendering in the HTML - it just renders as {this.props.imageUrl}. How can I make the variable pass through properly into the HTML?

Solution

You should not wrap JavaScript expressions in quotes.

<option data-img-src={this.props.imageUrl} value="1">{this.props.title}</option>

Take a look at the JavaScript Expressions docs for more info.

Answered By - Michelle Tilley
Answer Checked By - - Robin (ReactFix Admin)