React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate]
You have to bind your event handlers to correct context (this
):
onChange={this.setAuthorState.bind(this)}
Make sure you're calling super()
as the first thing in your constructor.
You should set this
for setAuthorState
method
class ManageAuthorPage extends Component { state = { author: { id: '', firstName: '', lastName: '' } }; constructor(props) { super(props); this.handleAuthorChange = this.handleAuthorChange.bind(this); } handleAuthorChange(event) { let {name: fieldName, value} = event.target; this.setState({ [fieldName]: value }); }; render() { return ( <AuthorForm author={this.state.author} onChange={this.handleAuthorChange} /> ); }}
Another alternative based on arrow function
:
class ManageAuthorPage extends Component { state = { author: { id: '', firstName: '', lastName: '' } }; handleAuthorChange = (event) => { const {name: fieldName, value} = event.target; this.setState({ [fieldName]: value }); }; render() { return ( <AuthorForm author={this.state.author} onChange={this.handleAuthorChange} /> ); }}