jbarradas jbarradas - 1 month ago 25
Javascript Question

ReactJS: setTimeout() not working?

Having this code in mind:

var Component = React.createClass({

getInitialState: function () {
return {position: 0};
},

componentDidMount: function () {
setTimeout(this.setState({position: 1}), 3000);
},

render: function () {
return (
<div className="component">
{this.state.position}
</div>
);
}

});

ReactDOM.render(
<Component />,
document.getElementById('main')
);


Isn't suppose to the state only changes after 3 seconds? It's changing immediately.

My main goal here is to change the state every 3 seconds [with setInterval()], but since was not working, I tried setTimeout(), and it's not working either. Any lights on this? Thanks!

Answer

Do

setTimeout(function() { this.setState({position: 1}); }.bind(this), 3000);

Otherwise, you are passing the result of setState to setTimeout.