React: React not updating DOM

[digitalkaoz]

it seems react doesnt updates the DOM with this approach:

(simply update the img src every 10 seconds)

if i set a breakpoint in render i see that this.state.url is always the latest and correct url.
in react-dev-tools the component gets updated every 10 seconds with the new url, but if i look into the DOM tab i see that its still the initialUrl. Any hints on that? Im clueless about what might be wrong :/ (using 0.12.2)

see http://jsfiddle.net/58a6dubg/7/ for a demo.

var React = require('react');

var RandomImage = React.createClass({

    getDefaultProps: function () {
        return {
            initialUrl: null
        };
    },

    getInitialState : function () {
        return {
            url: null
        };
    },

    componentDidMount : function () {
        setInterval(this.reloadImage, 10000);
    },

    reloadImage : function() {
        var image = new Image();
        var that = this;

        image.onload = function () {
            that.setState({url : this.src});
        };

        image.src = this.refs.image.getDOMNode().src.split('?')[0] + "?" + Date.now();
    },

    render : function () {
        return <img ref="image" src={this.state.url || this.props.initialUrl} />;
    }
});

module.exports = RandomImage;

[cody]

Your fiddle has no code, so I have pasted the above code in. The only change I made was to give props.initialUrl to an actual url: http://jsfiddle.net/58a6dubg/3/
The picture in the DOM updates every 10 seconds and everything looks fine. So I guess we need to see more code.

[digitalkaoz]

ok, this link should work:

http://jsfiddle.net/58a6dubg/7/

[cody]

Now I see the problem. :smiley:

You try to render into an <img> element. Rendering into a <div> works: http://jsfiddle.net/58a6dubg/6/

[digitalkaoz]

why it wont work with a img ?

[cody]

React.render does not change the properties of the container element itself. Only the children are changed. For the <img> element no children are allowed, so it can't be used with render.

[digitalkaoz]

ok, so i close this issue then...merci bien...i could think this behavior can be improved :)