forms - Delay between displaying an input value in react -

what i'm trying fix one-key-delay in state update e.target.value.

i have tried solving without redux , have exact same problem.

http://codepen.io/yoloonthebf/pen/kmwrpq?editors=0010

thanks lot help, hope can understand pen issue.

class app extends react.component{    //here issue ?!   handlechange(e){      const backspace_keycode = 8;     const keycodein = e.keycode;     if ( !isnumber(keycodein) && !(keycodein === backspace_keycode) ) {       return e.preventdefault();     }else{       store.dispatch({type: 'update', payload: e.target.value});     }     function isnumber(keycode){       return (keycode >= 48 && keycode <= 57) || (keycode >= 96 && keycode <= 105)     }     console.log(store.getstate())   }    render(){     return(       <div classname='container'>         <h1>{store.getstate()}</h1>         <input            type='text'            classname='form-control'            maxlength='16'           onkeydown={this.handlechange.bind(this)}         />       </div>     )   } } 

edit: forgot mention need numbers, 16 of them exact, want build credit card validation tool.

it's because of onkeydown event. e.target.value filled after onkeyup event, not after onkeydown. should use onchange event :

http://codepen.io/anon/pen/omprnz?editors=0010

i hope fit needs