Unable to reference react 'this' from fetch() callbacks inside event handler - reactjs

Question

Unable to this.setState() with fetch() response
Did fetch() inside form submit event handler, but unable to set the state from the fetch() callbacks
TypeError: Cannot read property 'setState' of undefined
...
constructor(props) {
super(props);
this.state = { deviceName: '', devices: [] };
this.handleChange = this.handleChange.bind(this);
this.handleSearchDevice = this.handleSearchDevice.bind(this);
}
componentWillMount() {
this.setState({
devices: this.props.devices
});
}
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
this.setState({
devices: nextProps.devices
});
}
handleChange(event) {
this.setState({deviceName: event.target.value });
}
handleSearchDevice(event) {
console.log('Searching '+this.state.deviceName)
event.preventDefault();
//Get data from API
const url = 'device/name'
const data = { deviceName:this.state.deviceName}
fetch(url, { method: 'POST',
body: JSON.stringify(data),
headers:{ 'Content-Type': 'application/json' }
}).then(res => {
res.json().then(function(data) {
console.log('API Response: '+JSON.stringify(data))
try {
this.setState({devices: data.resp, deviceName: data.deviceName})
} catch(err) {
console.log('catch ' + err.stack)
this.callback1(data)
}
});
}).catch(error => {
console.error('Error:', error)
}).then(response => {
console.log('Success:', response)
});
}
callback1(data) {
this.setState({devices: data.resp, deviceName: data.deviceName})
console.log(data)
}
render() {
...
}
componentDidUpdate(prevProps) {
}
...
I expect to set the state from callbacks inside the event handler
Error screenshot

Answer 1

That is because you have not bound the function callback1 to this. So in your constructor you should bind it the same way you bind your other functions.
An alternative way is to make callback1 an arrow function instead so that it does not have to be bound. That would look like this:
callback1 = () => {
this.setState({devices: data.resp, deviceName: data.deviceName})
console.log(data)
}