javascript - How can I re-render react-component when I setState using setTimeout? -

i tried write component update timeline every few seconds, use loop , use settimeout make interval more obvious:

let tmp = this.state.colors; // colors array for(let = 0 ; < 4; i++){     if(tmp[i]=="blue"){         tmp[i]="green";         settimeout(function () {             console.log(tmp);             this.mapped.setstate({                 colors: tmp             });         }.bind({mapped:this}), 2000);     } } 

but seems can't re-render component @ once,i want component update timeline every 2 seconds, re-render 1 time.

and know react process setstates() after eventhandler has completed.i tried use forceupdate although know it's not discouraged, doesn't work.

so what's best way re-render component?

any great appreciated.

---

update

thanks @andre-lee.

    (let = 0; < 4; i++) {         settimeout(function () {             tmp[i] = "green";             this.setstate({                 colors: tmp             });         }.bind(this), 2000 * (i + 1));     } 

the above code works.

i've created draft based on code snippet following, http://codepen.io/andretw/pen/jwmygo

there 2 major changes in draft.

1. you should use 2000 * i settimeout. or can use setinterval , clear later.
2. change color in callback function in settimeout.