Changing image onClick with React

Question

EDIT: Got this working wrapping it in a div. Anyone know why?

I have this image on my Jade (index.jade) template:

img(id='favourite-item')

And this React code:

var FavouriteItemButton = React.createClass({
    getInitialState: function () {
        return {favourite: false};
    },
    handleClick: function (event) {
        this.setState({favourite: !this.state.favourite});
    },
    render: function() {
        var icon = this.state.favourite ? 'images/item-active-empty-heart-icon.png' : 'images/item-active-full-heart-icon.png';
        return (
            <div onClick={this.handleClick}>
            <img
                src={icon}
                width='22' height='20'
            /></div>
        );
    }
});

React is rendering the image but at size: width=0, height=0, like so:

<img id="favourite-item">
     <img src='images/item-active-full-heart-icon.png' width='22' height='20' />
</img>

Questions:

1) Why is React rendering two images? Is this because React is for DOM elements and not images?

2) Why is my image not showing? I personally think it's because the parent image is covering the image inside.

3) Is React appropriate for this? Or should this be done in something like jQuery?

Any ideas are welcome.

I dont think React is rendering an image inside an image, jade is rendering the outside image and react is rendering the one inside, it works with a div outside because.. well that's valid html. — user1641172
– user1641172, Commented Apr 18, 2016 at 20:04
Thanks. It's now showing, but my onClick isn't firing. Do you have any idea why? — DennisTurn
– DennisTurn, Commented Apr 18, 2016 at 20:14
@DennisTurn: Please don't ask multiple questions in the same post. If you have solved your problem, post an answer saying what you did to solve your problem. If you have a new issue, please post a new question describing just that issue. — Conspicuous Compiler
– Conspicuous Compiler, Commented Apr 18, 2016 at 20:15

user1641172 · Accepted Answer · 2016-04-18 20:15:19Z

3

React isn't creating two images, jade is creating an image tag and using it as a wrapper for the React image, so this is more of a question of outputting valid html, than one of a problem with React or Jade.

In HTML the <img> tag has no end tag.

You are getting Jade to create an <img> tag but placing the react image inside that image:

<img id="favourite-item">
     <img src='images/item-active-full-heart-icon.png' width='22' height='20' />
</img>

If you change the Jade template wrapper to be a valid container, then it will work, also probably specify the units of measure so the browser doesn't have to guess:

div(id='favourite-item')

will give you:

<div id="favourite-item">
     <img src='images/item-active-full-heart-icon.png' width='22px' height='20px' />
</div>

answered Apr 18, 2016 at 20:15

user1641172

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing image onClick with React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related