I have the following simple react code in my JSX file:
/** @jsx React.DOM */
var Hello = React.createClass({
render: function() {
return <div><img src='http://placehold.it/400x20&text=slide1' alt={event.title} class="img-responsive"/><span>Hello {this.props.name}</span></div>;
}
});
React.renderComponent(<Hello name="World" />, document.body);
The output in the DOM is as follows:
<div data-reactid=".0">
<img src="http://placehold.it/400x20undefined1" data-reactid=".0.0">
<span data-reactid=".0.1">
<span data-reactid=".0.1.0">Hello </span>
<span data-reactid=".0.1.1">World</span>
</span>
</div>
I have two issues with it:
Any ideas?
This question is related to
javascript
css
reactjs
Remember that your img is not really a DOM element but a javascript expression.
This is a JSX attribute expression. Put curly braces around the src string expression and it will work. See http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions
In javascript, the class attribute is reference using className. See the note in this section: http://facebook.github.io/react/docs/jsx-in-depth.html#react-composite-components
/** @jsx React.DOM */
var Hello = React.createClass({
render: function() {
return <div><img src={'http://placehold.it/400x20&text=slide1'} alt="boohoo" className="img-responsive"/><span>Hello {this.props.name}</span></div>;
}
});
React.renderComponent(<Hello name="World" />, document.body);
var Hello = React.createClass({
render: function() {
return (
<div className="divClass">
<img src={this.props.url} alt={`${this.props.title}'s picture`} className="img-responsive" />
<span>Hello {this.props.name}</span>
</div>
);
}
});
Source: Stackoverflow.com