Uncaught TypeError: Cannot read property 'setState' of undefined at handleChange , Cannot read property 'props' of null at handleSubmit

Question

i am new to react-redux stack , i am learning the basic , i am stuck now . i want save the form data in mongodb , but nothing happing . i am getting these two error , plaese help how to insert these form data into database. thanks in avdance

this is my form.js page. i sent data to action.js page from here , then to server.js and then to controller.js where i take import the model and trying to save the data.

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import Messages from '../Messages';
import classnames from 'classnames';
import saveBasicUser  from '../../actions/basicAction';


class BasicUser extends React.Component {

  constructor(props) {

      super(props);


      this. state = {

            username : '',
            address : '',
            phone : '',
            date : '',
            billing : ''



           }
      }



  handleChange (e) {

      this.setState({ [e.target.name]: e.target.value });

  }



  //========================================================================

  handleSubmit(e) {


    e.preventDefault();

    this.props.saveBasicUser({ username, address, phone, date, billing });


  }

  //========================================================================


  render() {


    var divStyle = {
      padding: '16',
    };





    return (
      <div className="container ca-container">

        <div className="row">
          <div className="col-md-12">
              <h1> ADD basic USER</h1>

            <hr/>

            </div>
            </div>




          <form onSubmit={this.handleSubmit}>

          <label > Name : </label> 



          <input className= "form-control"  id = "username" name = "username" value={this.state.username}
                      onChange={this.handleChange}  />

          <label > address : </label> 


          <input className= "form-control" id = "address"  name = "address" value={this.state.address}
                      onChange={this.handleChange} />

          <label > Phone No: : </label> 


          <input className= "form-control"  id = "phone" name = "phone" value={this.state.phone}
                      onChange={this.handleChange}/>

          <label > Subscription date : </label> 


          <input className= "form-control" id = "date"  name = "date" type ="date" value={this.state.date}
                      onChange={this.handleChange}/>

          <label > Billing : </label> 


          <input className= "form-control" name = "billing" id = "billing" value={this.state.billing}
                      onChange={this.handleChange}/>

          <hr />           

          <button type="submit" value= "submit" className="btn btn-success btn-lg">Submit</button>

          </form>


          </div>


    );
  }
}


export default connect (null , {saveBasicUser})(BasicUser);

Answer 1

You have to bind your handleChange and handleSubmit functions to BasicUser otherwhise this will be undefined . There are many way to do it, but the easiest in your case is to use function as class property (with arrow function to preserve class scope).

handleChange = e => {
  this.setState({ [e.target.name]: e.target.value });
}

handleSubmit = e => {
  e.preventDefault();
  this.props.saveBasicUser({ username, address, phone, date, billing });
}

This syntax is brought by ES7, you'll may need this babel plugin to use it.

Another simple way if you don't want to install plugins is to use arrow functions inside render() :

<input onChange={e => this.handleChange(e)} />

Answer 2

Put these two lines in the constructor. You aren't using babel I think or something which is why you can't use arrows.

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this;