Common Problems
Development headaches are no bueno . This doc includes a list of commonly encountered problems during react development. If there's an issue you've encountered during your personal react development that you do not see on this, feel free to create a PR and add it. The more the merrier!
Uncaught TypeError: Cannot read property 'setState' of undefined
This can occur for an array of reasons, but most straight forward it means:
Whatever you are attempting to call
setState
on does not exist (is undefined)
TL;DR Answer: The function you're calling setState
in probably isn't bound to this
. You'll need to bind it to your component for it to work in event handlers. Add a statement like the following to your component's constructor: this.yourFunctionName() = this.yourFunctionName.bind(this);
Long Answer: This most commonly occurs when you are attempting to use this.setState(someData)
, and the scope that you are in is not bound to this
. A very common example of this is in event handler functions. For example, say you have an input field that onChange
(when the input value changes), calls the function handleInputChange()
and attempts to update the state attribute input
with the new input value. Like this:
class InputBox extends React.Component {
constructor(props) {
super(props);
}
handleInputChange(event) {
this.setState({input: event.target.value});
}
render() {
return (
<input
type="text"
value={this.state.input}
onChange={this.handleInputChange}
/>
);
}
}
This would throw Uncaught TypeError: Cannot read property 'setState' of undefined when someone edits what is inside the input field, and that is because the handleInputChange
function does not know what this is, because it is not bound to the component. To bind this function, add the following to the component's constructor:
constructor(props) {
super(props);
this.handleInputChange() = this.handleInputChange.bind(this);
}
Your function is now bound and should work properly .