Question

172

React img tag issue with url and class

rated 0 times [ 176] [ 4] / answers: 1 / hits: 187062 / 10 Years ago, fri, september 26, 2014, 12:00:00

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:

The image URL is rendered incorrectly, it is rendered as 'http://placehold.it/400x20undefined1'

The class on my image disappears

Any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maya

Add To Favorites

Follow

Total Points: 418

Total Questions: 116

Total Answers: 112

Location: Mauritania

Member since Sun, Oct 17, 2021

3 Years ago

maya questions

1 Setting React component props in a Styled Component

Sun, Jul 4, 21, 00:00, 3 Years ago

1 Dotenv unable to overwrite key value pair

Tue, Dec 22, 20, 00:00, 4 Years ago

1 Tracking with the new Google Analytics 4 (GA4) server-side

Fri, Nov 6, 20, 00:00, 4 Years ago

1 Discord.js - How do you log role changes?

Wed, Jul 29, 20, 00:00, 4 Years ago

1 How to change background color of button using react

Tue, Apr 21, 20, 00:00, 4 Years ago

View All

answered 10 Years ago aleenamarinr · 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);