TypeError: _this.props.addLead is not a function in react

Question

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 npx react-codemod rename-unsafe-lifecycles in your project source folder.

'''
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 => 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: ""
      });
    };
    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>
        )
    }
}

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

// here is the actions/leads file

import axios from 'axios';

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


export const getLeads = () => dispatch => {
    axios
    .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));
}

//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
});
'''

score 0 · Answer 1 · answered Mar 02 '20 at 10:13

as said, run the command npx react-codemod rename-unsafe-lifecycles and if you get error like this:

npm ERR cb() never called

then run this:

npm config set registry https://registry.npmjs.org/

and then again run this: npx react-codemod rename-unsafe-lifecycles This should solve the problem.

TypeError: _this.props.addLead is not a function in react

1 Answers1