reactjs - ReactsStars Rating with Redux are not allowing to set state -

i getting following error:

bundle.js:74359 uncaught typeerror: cannot read property 'setstate' of undefined.

i have sent onchange method bind , arrow rocket no success.

import reactstars 'react-stars' import react, {component} 'react'; import { field, reduxform, initialize, change} 'redux-form';  import { connect } 'react-redux';   class ratingsnew extends component{    constructor(props) {     super(props);     this.state = { overall_review : 1 };   }    renderfield(field){      const {meta:{touched, error}} = field;     if (field.type =="text"){      return(       <div classname = "form-group">         <label>{field.label}</label>          <input           classname = "form-control"           {...field.input}         />          <div classname = "text-help">           {touched ? error : "" }         </div>         </div>       );     }     else{        return(        <div classname = "form-group">         <label>{field.label}</label>           <reactstars           count = {5}           size = {20}           onchange={(value)=>{             onchange(field.input.name, value)           }}          />            <div classname = "text-help">           {touched ? error : "" }         </div>         </div>       );     }   }    onsubmit(values){     console.log(values)   }    render(){       const  {handlesubmit} = this.props         return(        <form  onsubmit= {handlesubmit(this.onsubmit.bind(this))}>         <div classname= "row">         <div classname= "col-md-4">         <field            label = "student name"           name = "student_name"            type = "text"           component = {this.renderfield}         />         </div>         <div classname= "col-md-4">         <field           label = "email"           name =  "student_email"           type = "text"           component = {this.renderfield}         />         </div>         <div classname= "col-md-4">         <field            label = "anonymous"           name  = "anonymous"           type = "text"           component = {this.renderfield}         />         </div>         </div>          <field            label = "title"           name  = "title"           type = "text"           component = {this.renderfield}         />         <field            label = "description"           name  = "description"           type = "text"           component = {this.renderfield}         />         <div classname = "row">         <div classname = "col-sm-3">         <field            label = "overall"           name  = "overall_review"           type = "hidden"           component = {this.renderfield}         />         </div>         <div classname = "col-sm-3">         <field            label = "curriculum"           name  = "curriculum_review"           type = "hidden"           component = {this.renderfield}         />         </div>         <div classname = "col-sm-3">         <field            label = "instructor"           name  = "instructor_review"           type = "hidden"           component = {this.renderfield}         />         </div>         <div classname = "col-sm-3">         <field            label = "job assistance"           name  = "job_assistance_review"           type = "hidden"           component = {this.renderfield}         />         </div>         </div>         <button type = "submit" classname = "btn btn-primary">submit</button>       </form>      );     }; } function validate(values){   const errors = {}   if(!values.student_name){     errors.student_name = "enter name"   }   if(!values.student_email){     errors.student_email = "enter email"   }   if(!values.title){     errors.title = "enter title"   }   if(!values.description){     errors.description = "enter description"   }   if(!values.overall_review){     errors.overall_review = "share overall review"   }   if(!values.curriculum_review){     errors.curriculum_review = "share curriculum review"   }   if(!values.curriculum_review){     errors.instructor_review = "share instructor review"   }   if(!values.job_assistance_review){     errors.job_assistance_review = "share job assistance review"   }   return errors }  function onchange(name, value){   console.log(value);   console.log(name);   this.setstate("rating": value);   }  export default reduxform({ validate, form: 'ratingform' })( connect(null,{change})(ratingsnew) ); 

what need fix error?

your onchange function should part of component can use this :

class ratingsnew extends component {    // .. other code ..    onchangerating = (name, value) => {     console.log(value);     console.log(name);     this.setstate({       rating: value     });    }    // bind `renderfield`:   renderfield = (field) => {     // ...   } } 

---

<reactstars   count={5}   size={20}   onchange={(value) => {     this.onchangerating(field.input.name, value);   }} />