Amnestic Amnestic - 1 month ago 6
Javascript Question

Passed event handler not firing

I have the following class (only left the necessary details for clarity):

class CalendarAndUsage extends React.
constructor(props) {
super(props);

this.handleClickOnDay = this.handleClickOnDay.bind(this);

}

handleClickOnDay() {
console.log("wtf");
}

render() (
return (<Calendar onDayClick={this.handleClickOnDay} />
)
}
}


The Calendar class looks as follow:

class Calendar extends React.Component {
render() {

let weeks = this.props.weeks.map((week) => {
return (
<Week onDayClick={this.props.onDayClick} />
)
}
);

return (
<div className="calendar">
{weeks}
</div>
)
}
}


And finally the Week class code:

class Week extends React.Component {
render() {
/* lots of uninteresting code */
return <OffMonthDay onClick={() => this.props.onDayClick()}>{`${dayOfTheWeek} ${date.day}`}</OffMonthDay>
}


But for God knows what reason, whenever the OffMonthDay element is clicked, the onClick event isn't firing. Am I doing something completely wrong?

EDIT:

OffMonthDay is pretty simple:

function OffMonthDay(props) {
return (
<div className="col-md-1 off-month-day day">
{props.children}
</div>
)
}

QoP QoP
Answer

It's not working because OffMonthDay doesn't have an onClick event.

It should look like this

function OffMonthDay(props) {
    return (
        <div 
           onClick={props.onClick}
           className="col-md-1 off-month-day day"
        >
            {props.children}
        </div>
    )
}
Comments