title: React: Unhandled Rejection (TypeError): Cannot read property 'data' of undefined
body: <p>In my react/redux app whenever i pass the form data to <code>POST</code> api i get an error</p>
  <blockquote>
  <p>Unhandled Rejection (TypeError): Cannot read property 'data' of undefined/</p>
  </blockquote>
  <p>The data is still being submitted to the Django back-end since when i check data in my back-end, I can confirm the data i did input in the form was submitted and saved. However it's the front-end that i think has the error.
  What i'm i missing?</p>
  <p><strong>Form</strong> component</p>
  <pre><code>class FormInvoice extends Component {
    state = {
      invoiceOwner: &quot;&quot;,
      product: &quot;&quot;,
      quantity: &quot;&quot;,
      mode: &quot;&quot;,
      status: &quot;&quot;,
      payment_made: &quot;&quot;,
    };
  
    static propTypes = {
      addInvoiceData: PropTypes.func.isRequired,
    };
  
    onChange = (e) =&gt;
      this.setState({
        [e.target.name]: e.target.value,
      });
  
    onSubmit = (e) =&gt; {
      e.preventDefault();
      const {
        invoiceOwner,
        product,
        quantity,
        mode,
        status,
        payment_made,
      } = this.state;
      const invoice = {
        invoiceOwner,
        product,
        quantity,
        mode,
        status,
        payment_made,
      };
      this.props.addInvoiceData(invoice); &lt;=== Action for passing data to POST api
    };
    render() {
      const {
        invoiceOwner,
        product,
        quantity,
        mode,
        status,
        payment_made,
      } = this.state;
      return (
        &lt;div className=&quot;App container&quot;&gt;
          &lt;Modal isOpen={this.props.newInvoiceModal} scrollable={true}&gt;
            &lt;ModalHeader toggle={this.props.toggleModal}&gt;Add Invoice&lt;/ModalHeader&gt;
            &lt;ModalBody&gt;
              &lt;FormGroup&gt;
                &lt;Label for=&quot;title&quot;&gt;Name&lt;/Label&gt;
                &lt;Input
                  name=&quot;invoiceOwner&quot;
                  value={invoiceOwner}
                  onChange={this.onChange}
                /&gt;
              &lt;/FormGroup&gt;
              &lt;FormGroup&gt;
                &lt;Label for=&quot;title&quot;&gt;Product&lt;/Label&gt;
                &lt;Input name=&quot;product&quot; value={product} onChange={this.onChange} /&gt;
              &lt;/FormGroup&gt;
  
              &lt;FormGroup&gt;
                &lt;Label for=&quot;title&quot;&gt;Quantity&lt;/Label&gt;
                &lt;Input
                  name=&quot;quantity&quot;
                  value={quantity}
                  onChange={this.onChange}
                /&gt;
              &lt;/FormGroup&gt;
              &lt;FormGroup&gt;
                &lt;Label for=&quot;title&quot;&gt;Mode&lt;/Label&gt;
                &lt;Input name=&quot;mode&quot; value={mode} onChange={this.onChange} /&gt;
              &lt;/FormGroup&gt;
              &lt;FormGroup&gt;
                &lt;Label for=&quot;title&quot;&gt;Status&lt;/Label&gt;
                &lt;Input name=&quot;status&quot; value={status} onChange={this.onChange} /&gt;
              &lt;/FormGroup&gt;
              &lt;FormGroup&gt;
                &lt;Label for=&quot;title&quot;&gt;Paid&lt;/Label&gt;
                &lt;Input
                  name=&quot;payment_made&quot;
                  value={payment_made}
                  onChange={this.onChange}
                /&gt;
              &lt;/FormGroup&gt;
            &lt;/ModalBody&gt;
            &lt;ModalFooter&gt;
              &lt;button onClick={this.onSubmit} className=&quot;btn btn-primary&quot;&gt;
                Submit
              &lt;/button&gt;{&quot; &quot;}
              &lt;Button color=&quot;secondary&quot; onClick={this.props.toggleModal}&gt;
                Cancel
              &lt;/Button&gt;
            &lt;/ModalFooter&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default connect(null, { addInvoiceData })(FormInvoice);
  </code></pre>
  <p><strong>Redux</strong> part</p>
  <pre><code>// API
  const api = Axios.create({
    baseURL: &quot;http://localhost:8000/api&quot;,
    timeout: 30000,
    headers: {
      &quot;Content-Type&quot;: &quot;application/json&quot;,
      &quot;Accept&quot;: &quot;application/json&quot;,
    },
  });
  
  api.interceptors.request.use(
    (config) =&gt; {
      if (localStorage.getItem(&quot;access&quot;)) {
        config.headers.Authorization = `JWT ${localStorage.getItem(&quot;access&quot;)}`;
      }
  
      return config;
    },
    (error) =&gt; Promise.reject(error)
  );
  export default api;
  
  // ADD INVOICE DATA
  import API from &quot;../api&quot;
  
  export const addInvoiceData = (invoice) =&gt; async (dispatch) =&gt; {
    await API.post(&quot;/clients/invoice/&quot;, invoice)
      .then((res) =&gt; {
        dispatch(createMessage({ addInvoiceData: &quot;Invoice detail added&quot; }));
        dispatch({
          type: ADD_INVOICE_DATA,
          payload: res.data,
        });
        dispatch({
          type: TOGGLE_MODAL,
        });
      })
      .catch((err) =&gt;
        dispatch(returnErrors(err.response.data, err.response.status))
      );
  };
  
  //Reducer
  const initialState = {
    invoiceData: [],
    newInvoiceModal: false,
  };
  
  export default function (state = initialState, action) {
    switch (action.type) {
      case GET_INVOICE_DATA:
        return {
          ...state,
          invoiceData: action.payload,
        };
  
      case ADD_INVOICE_DATA:
        return {
          ...state,
          invoiceData: action.payload,
        };
    }
  }
  </code></pre>