Trying to use this.props.dispatch and returns that is not a function

Question

I am trying to delete an item from DB but when I access the function is saying _this.props.dispatch is not a function. (In '_this.props.dispatch((0, _actions.deleteJob)(_this.props.id))', '_this.props.dispatch' is undefined) _this.props.dispatch is not a function. (In '_this.props.dispatch((0, _actions.deleteJob)(_this.props.id))', '_this.props.dispatch' is undefined)

Here is my code where I am calling the function to delete my item. The function onDelete() I am calling it after user interaction.

class JobItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      activeRowKey: null,
      deleting: false
    };
  }
  onDelete = () =>   {
    this.setState({deleting: true});
    this.props.dispatch(deleteJob(this.props.id)); // HERE is the error
  }
  render() {
    const swipeSettings = {
      autoClose: true,
      onClose: (secId, rowId, direction) => {
        this.setState({ activeRowKey: null });
      },
      onOpen: (secId, rowId, direction) => {
        this.setState({ activeRowKey: this.props.id });
      },
      right: [
        { 
          onPress: () => {
            const deletingRow = this.state.activeRowKey;
            Alert.alert(
              'Alert',
              'Are you sure you want to delete?',
              [
                {text: 'No', onPress: () => console.log('Cancel Pressed'), style:'cancel'},
                {text: 'Yes', onPress: () => {
                  this.onDelete();
                  // Refresh Job List
                  this.props.parentFlatList.refreshJobList(deletingRow);
                }},
              ],
              { cancelable: true }
            )
          },
          text: 'Delete', type: 'delete'
        }
      ],
      rowId: this.props._id,
      sectionId: 1
    }

And here is the deleteJob() function where it actually delete it from DB

export function deleteJob(job_id) {
  return function (dispatch) {
      return axios.delete(JOB_URL(user_id, job_id), {
        headers: { authorization: token }
      }).then((response) => {
        dispatch(removeJob(job_id));
      }).catch((err) => {
        dispatch(addAlert("Couldn't delete job."));
      });
  };
}

JobItem

var renderJobs = () => {
  return this.props.jobs.map((job) => {
    return (
      <JobItem 
        parentFlatList={this}
        key={job._id} 
        title={job.title} 
        shortDescription={job.shortDescription} 
        logo={job.avatar} 
        company={job.company} 
        id={job._id}/>
    )
  })
}
var mapStateToProps = (state) => {
  return {
    jobs: state.jobs
  }
}
module.exports = connect(mapStateToProps)(JobList);

Any idea how shall I solve this?

Answer 1

I think you forgot to pass dispatch to JobItem

<JobItem 
    parentFlatList={this}
    key={job._id} 
    title={job.title} 
    shortDescription={job.shortDescription} 
    logo={job.avatar} 
    company={job.company} 
    id={job._id}
    dispatch={this.props.dispatch} /* <-- this one here */
/>

Answer 2

One way to fix the problem is to put JobItem inside container. Something like this

module.exports = connect(mapStateToProps,dispatch=>({dispatch}))(JobItem);