title: TypeError: _this.props.addLead is not a function in react
body: <p>i am having issues with prime-react, i tried to connect it to my django api which i had done successfully b4 and it work but with prime-react the same code doesn't seem to work. i don't know if it is running  react dom or this is just a bug. so got this warning message in my console.  Move code with side effects to componentDidMount, and set initial state in the constructor.
  Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run <code>npx react-codemod rename-unsafe-lifecycles</code> in your project source folder.</p>
  
  <pre><code>'''
  LeadsForm
  
  import React, { Component } from 'react'
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import { addLead } from '../actions/leads';
  import {InputTextarea} from 'primereact/inputtextarea';
  import {InputText} from 'primereact/inputtext';
  import { Button } from 'primereact/button';
  
  export class LeadsForm extends Component {
      state = {
          name: '',
          email: '',
          message: ''
      };
      static propTypes = {
        addLead: PropTypes.func.isRequired
      };
    onChange = e =&gt; this.setState({ [e.target.name]: e.target.value});
  
    onSubmit = e =&gt; {
        e.preventDefault();
        const { name, email, message } = this.state;
        const lead = { name, email, message };
        this.props.addLead(lead);
        this.setState({
          name: "",
          email: "",
          message: ""
        });
      };
      render() {
          const { name, email, message } = this.state;
          return (
              &lt;div className="card card-w-title"&gt;
              &lt;div className="p-grid "&gt;
                 &lt;h2&gt;Add Lead&lt;/h2&gt;
                 &lt;form onSubmit={this.onSubmit}&gt;
                   &lt;div className="p-col-12"&gt;
                      &lt;span className="p-float-label"&gt;
                        &lt;InputText id="in"
                        name="name" 
                        value={name} 
                        onChange={this.onChange} size={50} /&gt;
                        &lt;label htmlFor="in"&gt;Name&lt;/label&gt;
                      &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className="p-col-12"&gt;
                      &lt;span className="p-float-label"&gt;
                        &lt;InputText id="in"
                        name="email" 
                        value={email} 
                        onChange={this.onChange} size={50}/&gt;
                        &lt;label htmlFor="in"&gt;Email&lt;/label&gt;
                      &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className="p-col-12"&gt;
                      &lt;span className="p-float-label"&gt;
                      &lt;InputTextarea id="in" size={50} rows={5} cols={30}
                        name="message" 
                        value={message} 
                        onChange={this.onChange} /&gt;
                        &lt;label htmlFor="in"&gt;Message&lt;/label&gt;
                      &lt;/span&gt;
                      &lt;/div&gt;
  
  
              &lt;Button type = "submit" value="Submit" label="Save" style={{marginBottom:'10px'}} className="p-button-raised" /&gt;
              {/* &lt;button type="submit" className="btn btn-primary"&gt;
                Submit
              &lt;/button&gt; */}
  
                 &lt;/form&gt;
             &lt;/div&gt;
             &lt;/div&gt;
          )
      }
  }
  
  export default connect(null, { addLead })(LeadsForm);
  </code></pre>
  
  <p>// here is the actions/leads file</p>
  
  <pre><code>import axios from 'axios';
  
  import { GET_LEADS, ADD_LEAD } from './types'
  
  
  export const getLeads = () =&gt; dispatch =&gt; {
      axios
      .get("http://127.0.0.1:8000/api/leads/")
      .then(res =&gt; {
          dispatch({
              type: GET_LEADS,
              payload: res.data
          });
      }).catch(err =&gt; console.log(err));
  };
  
  // ADD LEADS
  export const addLead = lead =&gt; dispatch =&gt; {
      axios
      .post("http://127.0.0.1:8000/api/leads/", lead)
      .then(res =&gt; {
          dispatch({
              type: ADD_LEAD,
              payload: res.data
          });
      }).catch(err =&gt; console.log(err));
  }
  
  //here is the action/types file
  
  export const GET_LEADS = "GET_LEADS";
  export const ADD_LEAD = "ADD_LEAD";
  
  //reducers/leads
  
  import { GET_LEADS, ADD_LEAD } from '../actions/types.js';
  
  const initialState = {
      leads: []
  }
  
  export default function (state = initialState, action){
  switch(action.type){
      case GET_LEADS:
        return {
          ...state,
          leads: action.payload
        };
      case ADD_LEAD:
        return {
          ...state,
          leads: [...state.leads, action.payload]
        }
      default:
          return state;
      }
  }
  
  //reducers/index
  
  import { combineReducers } from 'redux';
  import leads from './leads';
  export default combineReducers({
      leads
  });
  '''
  </code></pre>