Linking to a different page using react-day-picker and react router v4

Question

I'm trying to utilize this example in order to create a calendar that lists out the events in the current month, I have this part working, but what I have yet to figure out is how to make it so that the user can click the event name and it would take them to that event page.

So per that example, if they click on one of the birthdays, it would take them to an events page where they could see more about that birthday.

Currently, my events page is being rendered using this function:

renderEvents() {
    const {events} = this.state
    this.state.events = {};
    let eventItems = this.state.eventGet.map(event => {
        console.log(event.id)
        if(typeof(events[moment(event.date).date()]) !== "undefined") {
            events[moment(event.date).date()].push(event.name)
        } else {
            events[moment(event.date).date()] = [event.name]
        }
    });

    function renderDay(day) {
      const date = day.getDate();
      const dateStyle = {
        position: 'absolute',
        color: 'lightgray',
        bottom: 0,
        right: 0,
        fontSize: 20,
      };
      const containerStyle = { 
        margin:'2px',
        border: '1px solid #3a87ad',
        borderRadius: '3px',
        position: 'relative',
        display: 'block',
        cursor: 'pointer'
     };
     const textStyle = {
        fontSize: '0.8em', 
        textAlign: 'left',
        margin: '1.5px',
     }
      const cellStyle = {
        height: 150,
        width: 160,
        position: 'relative',
      };

      return (
        <div style={cellStyle}>
          <div style={dateStyle}>{date}</div>
          {events[date] &&
            events[date].map((name, i) => (
              <div onClick={() => this.props.history.push('/organizations/' + this.props.match.params.orgID + '/events' + i)} key={i} style={containerStyle}>
                <div style={textStyle}> {name} </div>
              </div>
            ))}
        </div>
      );
    }

    return (
        <div>
                <Grid component="section" className="section--center" shadow={0} noSpacing>
                <Cell col={12}>
                    <FABButton style={{margin: '10px', float: "right"}} colored ripple onClick={() => this.props.history.push('/organizations/' + this.props.match.params.orgID + '/events')}>
                        <Icon name="add" />
                    </FABButton>
                </Cell>

                    <DayPicker
                      canChangeMonth={true}
                      className="Birthdays"
                      renderDay={renderDay}
                    />

                </Grid>
            </div>
    );
}

The current problem is within the sub-function, renderDay which is called by the DayPicker component that gets the events associated with the day. When I try to push to the history property, it errors out and says that I cannot read property 'history' from undefined, which makes sense because we did not pass the history property to that function.

Can someone help me in figuring out how to modify that sub-function so that the onClick event on the div will take a user to that events page?

Answer 1

and says that I cannot read property 'history' from undefined

Make sure your renderDay function is bound to the correct this:

<DayPicker
  canChangeMonth
  className="Birthdays"
  renderDay={renderDay.bind(this)}
/>