Handling dynamic content

[MikaelLarsson]

How do you recommend handling dynamic content? I have a component where I set the content of the modal in a state variable. The problem is that when I set state and open the modal in the same function, the modal always get old content.

Component = React.createClass({
    openModal: function( item ){
        this.setState({ item: item });
        this.refs.itemModal.show();
    },
    render: function(){
        return(
            <a href="javascript:;" onClick={ this.openModal.bind( this, item ) }>Load dynamic content</a>
            <SkyLight ref="itemModal">
                <CreatePurchase item={ this.state.item } />
            </SkyLight>
        )
    }
});

[bebraw]

The problem is that setState is async. You'll want to show the modal only after it has been committed. Ie. try something along

var that = this;

this.setState({ item: item }, function() {
    that.refs.itemModal.show();
});

[MikaelLarsson]

That did the trick! Thanks =)