I am getting an error "TypeError: Cannot read property 'setState' of undefined" while doing a simple thing in ReactJS. I am trying to use axios to fill input with response data. So far without success. I am very new to both axios and ReactJs so it might be something very simple I overlooked?
I would expect "RESPONSE TEXT" to show up in the input field in the form after the TypeError is fixed.
This is my component:
class BasicInfoBlock extends React.Component {
constructor(props) {
super(props);
this.state = { name : "EventTestName" };
}
componentDidMount() {
axios
.get(getBaseUrl()+`get`)
.then(function (response) {
this.setState({name: "RESPONSE TEXT"});
//this.setState({name: response.data.name});
})
.catch((e) =>
{
console.error(e);
});
//this.setState({});
}
render(){
return(
<form className="form-horizontal">
<div className="form-group">
<label htmlFor="eventName" className="col-sm-2 control-label">Name</label>
<div className="col-sm-10">
<input type="text" id="eventName" className="form-control" placeholder="Event name" defaultValue={this.state.name}/>
</div>
</div>
</form>
);
}
}
Thank you for your help
edit: this is not a duplicate question, this questions relates to 'this' not being available in callback. Question selected as duplicate is related to bind.
this
inside of the callback function.this
losing context when inside another function. Bind is one solution, arrows are another, using a separate var likevar self = this;
and then callingself.setState
is another.