reactjs - React onChange event doesnt return object -

i'm setting simple signup form react , using onchange handler update state. event argument caught onchange handler string , not object .

therefore i'm unable access event.target.value or event event.target event yields typed keywords

this relevant snippet.

class signup extends component{    constructor(props){     super(props);     this.state = {       username:'',       password:''     }     this.handlechange = this.handlechange.bind(this)   }    handlechange(event){     this.setstate({...this.state,[event.target.name]:event.target.value})    }    render(){     const signup = this.props.signup;     return(     <form>       <card classname={style.signupcard}>         <cardtitle           title="sign up"           />           <cardactions>             <input type="text" label="username" value={this.state.username} placeholder="pick username" maxlength={16} onchange={this.handlechange} name="username" value={this.state.username}/>           </cardactions>           <cardactions>             <input type="password" label="password" value={this.state.password} placeholder="password" onchange={this.handlechange} name="password" value={this.state.password}/>           </cardactions>           <cardactions>             <button label="sign up" raised primary onclick={() => signup(this.state.username,this.state.password)}/>           </cardactions>       </card>     </form>     )   } }  export default signup; 

my errors in console

uncaught typeerror: cannot read property 'name' of undefined 

the input field react-toolbox component

class input extends react.component {   static proptypes = {     children: react.proptypes.any,     classname: react.proptypes.string,     disabled: react.proptypes.bool,     error: react.proptypes.string,     floating: react.proptypes.bool,     hint: react.proptypes.string,     icon: react.proptypes.oneoftype([       react.proptypes.string,       react.proptypes.element     ]),     label: react.proptypes.string,     maxlength: react.proptypes.number,     multiline: react.proptypes.bool,     onblur: react.proptypes.func,     onchange: react.proptypes.func,     onfocus: react.proptypes.func,     onkeypress: react.proptypes.func,     required: react.proptypes.bool,     type: react.proptypes.string,     value: react.proptypes.any   };    static defaultprops = {     classname: '',     hint: '',     disabled: false,     floating: true,     multiline: false,     required: false,     type: 'text'   };    handlechange = (event) => {     if (this.props.onchange) this.props.onchange(event.target.value, event);   };    blur () {     this.refs.input.blur();   }    focus () {     this.refs.input.focus();   }    render () {     const { children, disabled, error, floating, hint, icon,             label: labeltext, maxlength, multiline, required,             type, value, ...others} = this.props;     const length = maxlength && value ? value.length : 0;     const labelclassname = classnames(style.label, {[style.fixed]: !floating});      const classname = classnames(style.root, {       [style.disabled]: disabled,       [style.errored]: error,       [style.hidden]: type === 'hidden',       [style.withicon]: icon     }, this.props.classname);      const valuepresent = value !== null && value !== undefined && value !== '' && !number.isnan(value);      const inputelement = react.createelement(multiline ? 'textarea' : 'input', {       ...others,       classname: classnames(style.input, {[style.filled]: valuepresent}),       onchange: this.handlechange,       ref: 'input',       role: 'input',       disabled,       required,       type,       value,       maxlength     });      return (       <div data-react-toolbox='input' classname={classname}>         {inputelement}         {icon ? <fonticon classname={style.icon} value={icon} /> : null}         <span classname={style.bar}></span>         {labeltext           ? <label classname={labelclassname}>               {labeltext}               {required ? <span classname={style.required}> * </span> : null}             </label>           : null}         {hint ? <span classname={style.hint}>{hint}</span> : null}         {error ? <span classname={style.error}>{error}</span> : null}         {maxlength ? <span classname={style.counter}>{length}/{maxlength}</span> : null}         {children}       </div>     );   } }  export default input; 

according react-toolbox documentation,

your handlechange should this

handlechange = (name, value) => {     this.setstate({...this.state, [name]: value}); }; 

and onchange

onchange={this.handlechange.bind(this,'fieldname'} 

e.g password should this

 <input onchange={this.handlechange.bind(this,'password'}  type="password" label="password" value={this.state.password} placeholder="password" name="password" value={this.state.password}/>