React img tag issue with url and class

Question

I have the following simple react code in my JSX file        jsx React DOM     var Hello   React createClass       render  function             return  lt div gt  lt img src  http   placehold it 400x20 amp text slide1  alt  event title  class  img-responsive   gt  lt span gt Hello  this props name  lt  span gt  lt  div gt              React renderComponent  lt Hello name  World    gt   document body     The output in the DOM is as follows    lt div data-reactid   0  gt     lt img src  http   placehold it 400x20undefined1  data-reactid   0 0  gt     lt span data-reactid   0 1  gt       lt span data-reactid   0 1 0  gt Hello  lt  span gt       lt span data-reactid   0 1 1  gt World lt  span gt     lt  span gt   lt  div gt    I have two issues with it    The image URL is rendered incorrectly  it is rendered as  http   placehold it 400x20undefined1  The class on my image disappears   Any ideas

User · Accepted Answer

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);

User · Answer

var Hello   React createClass       render  function           return            lt div className  divClass  gt              lt img src  this props url  alt     this props title  s picture    className  img-responsive    gt              lt span gt Hello  this props name  lt  span gt           lt  div gt

[javascript] React img tag issue with url and class

Examples related to javascript

Examples related to css

Examples related to reactjs