'x' is not defined - React map dispatch to Props

Question

Currently have an issue where by I want to update props based on 'componentdidupdate'. However everytime i call this function (onUpdateSelectedDate), it keeps saying

onUpdateSelectedDate is not defined

I have tried the following:

onUpdateSelectedDate(toggledDate)


this.onUpdateSelectedDate(toggledDate)


this.props.onUpdateSelectedDate(toggledDate)

and still unsure why i am getting this error.

Code below

import DayPicker from "react-day-picker"
import React, {Component} from 'react'
import './calendarDatePicker.scss'
import propTypes from 'prop-types'
import { connect } from 'react-redux'

class CalendarDatePicker  extends Component {
  state = {
    toggledDate: null,
  }

  componentDidUpdate = () => {
    const toggledDate = this.state.toggledDate
    onUpdateSelectedDate(toggledDate)
  }

  render() {
    const selectedDate = this.props.selectedDays
    const onDayClick = this.props.onDayClick
    const toggledDate = this.state.toggledDate
    const modifiers = {
    }

    return (
        <DayPicker
          selectedDays={toggledDate===null ? selectedDate : toggledDate}
          onDayClick={onDayClick}
          todayButton="Go to Today"
          firstDayOfWeek={1}
          modifiers = {modifiers}
          onMonthChange={(d) => this.setState({toggledDate: d})}
        />
    )
  }
}

CalendarDatePicker.propTypes = {
  selectedDays: propTypes.instanceOf(Date),
  onDayClick: propTypes.func,
  onUpdateSelectedDate: propTypes.func,
}

const mapStateToProps = (state) => {
  return {
    //toggledDate: state.diaryContext.activities.selectedDates,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onUpdateSelectedDate: (toggledDate) => { dispatch(diaryActions.updateSelectedDate(toggledDate)) },
  }
}

export default connect(null, mapDispatchToProps)(CalendarDatePicker)

Answer 1

You use a wrong signature for the componentDidUpdate method it should be componentDidUpdate(prevProps, prevState) and then you can access your function from mapStateToProps like that:

componentDidUpdate (prevProps, prevState) {
    const toggledDate = prevState.toggledDate
    prevProps.onUpdateSelectedDate(toggledDate)
}