I'm making very simple react app. Yet as I try to invoke method of parent (actually grandparent) component via onChange event, I keep getting Uncaught TypeError: Cannot read property 'props' of undefined
.
Here is the component/form that is triggering the event (thus invoking method on binded parent component... Yes I used .bound(this) on the method as I passed it down from parent component via props.).
class MonthsTable extends Component {
handleChangeOnMonth(e){
this.props.setMonth(e.target.id, e.target.value); // here the method is not found, causing error.
}
render(){
console.log(this.props.setMonth) // here the method is present alright
return (<form>
{this.props.months.map((e, i) =>
<input
type='number'
id={i}
key={i} // yes I know, bad habit, but in this case it doesn't matter
value={this.props.months[i]}
onChange={this.handleChangeOnMonth} />)}
</form>)
}
}
Here is how I pass the method as props from most parent (grandparent) component.
<Months setMonth={this.setMonth.bind(this)} />
Here is how I pass the method as props in the parent (the component that is between method owner and method invoker)
<MonthsTable setMonth={this.props.setMonth} />
And finally passed to component (MonthsTable) that you saw first. Wheter it is relevant or not, final (most child) components is displayed depending of if statement which works just fine (Might somehow be relevant, I don't know).
Question is... Why is the (setMonth) method 'invisible' inside of (handleChangeOnMonth) method.
this.handleChangeOnMonth
tothis
too?