TypeError: _this.props.addLead is not a function

Question

I am trying to connect Primereact to my django backend project use a restframework and corsheader to connect both but i keep getting this error when trying to get or pass data.

Warning: Failed prop type: The prop addLead is marked as required in LeadsForm, but its value is undefined.Uncaught TypeError: _this.props.addLead is not a function LeadsForm.js:24

My action file

        import axios from 'axios';

        import { GET_LEADS, ADD_LEAD } from './types'


        export const getLeads = () => dispatch => {
            axios`enter code here`
            .get("http://127.0.0.1:8000/api/leads/")
            .then(res => {
                dispatch({
                    type: GET_LEADS,
                    payload: res.data
                });
            }).catch(err => console.log(err));
        };

        // ADD LEADS
        export const addLead = lead => dispatch => {
            axios
            .post("http://127.0.0.1:8000/api/leads/", lead)
            .then(res => {
                dispatch({
                    type: ADD_LEAD,
                    payload: res.data
                });
            }).catch(err => console.log(err));
        }

LeadsForm file

    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 => this.setState({ [e.target.name]: e.target.value});

      onSubmit = e => {
          e.preventDefault();
          const { name, email, message } = this.state;
          const lead = { name, email, message };
          this.props.addLead(lead);
          this.setState({
            name: "",
            email: "",
            message: ""
          });

        };

        // onSubmit = e => {
        //   this.setState({
        //     name: "",
        //     email: "",
        //     message: ""
        //   });
        // };
        render() {
            const { name, email, message } = this.state;
            return (
                <div className="card card-w-title">
                <div className="p-grid ">
                   <h2>Add Lead</h2>
                   <form onSubmit={this.onSubmit}>
                     <div className="p-col-12">
                        <span className="p-float-label">
                          <InputText id="in"
                          name="name" 
                          value={name} 
                          onChange={this.onChange} size={50} />
                          <label htmlFor="in">Name</label>
                        </span>
                        </div>
                        <div className="p-col-12">
                        <span className="p-float-label">
                          <InputText id="in"
                          name="email" 
                          value={email} 
                          onChange={this.onChange} size={50}/>
                          <label htmlFor="in">Email</label>
                        </span>
                        </div>
                        <div className="p-col-12">
                        <span className="p-float-label">
                        <InputTextarea id="in" size={50} rows={5} cols={30}
                          name="message" 
                          value={message} 
                          onChange={this.onChange} />
                          <label htmlFor="in">Message</label>
                        </span>
                        </div>


                <Button type = "submit" value="Submit" label="Save" style={{marginBottom:'10px'}} className="p-button-raised" />
                {/* <button type="submit" className="btn btn-primary">
                  Submit
                </button> */}

                   </form>
               </div>
               </div>
            )
        }
    }

    // LeadsForm.propTypes= {
    //   addLead: PropTypes.func
    // }

    export default connect(null, { addLead })(LeadsForm);

    reducer/leads.js

    import { GET_LEADS, ADD_LEAD } from '../actions/types';

    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;
        }
    }
    '
    reducer/index.js

   ' import { combineReducers } from 'redux';
    import leads from './leads';
    export default combineReducers({
        leads
    });

store.js

    import { createStore, applyMiddleware} from 'redux';
    import { composeWithDevTools} from 'redux-devtools-extension';
    import thunk from 'redux-thunk';
    import rootReducer from './reducers';

    const initialState = {};

    const middleware = [thunk];

    const store = createStore(
       rootReducer,
       initialState,
       composeWithDevTools(applyMiddleware(...middleware))
    );
    export default store;   

Answer 1

You are doing both a named export (export class ...) and a default export (export default ...) of your LeadsForm component. The default export will be wrapped by connect with your action added to props, the named export will not be wrapped by connect making your action undefined.

If the component will not work without being put through connect you should probably remove the named export to reduce confusion.

Verify that you are importing LeadsForm as a default import. This is most likely your problem.