Get API response to a function and populate controls - reactjs

Question

I have created a react application where i am fetching an API and getting the response. below are the code,
export class EmpDetails extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.updateEmpName = this.updateEmpName.bind(this);
}
componentWillReceiveProps(nextProps) {
this.handleProp(nextProps);
if(nextProps){
this.GetData(nextProps);
} else {
console.log("Emp number not set");
}
}
GetData(props, EmpCollection) {
this.ApiCall(props);
}
ApiCall(props) {
$.ajax({
url: 'http://localhost:8081/getdata',
type: 'POST',
data: {Empnumber:props.Empnumber},
success: function(data) {
this.setState({EmpCollection: data.EmpCollection});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.Empnumber, status, err.toString());
}.bind(this)
});
}
getInitialState(){
return {
EmpCollection: []
}
}
updateEmpName(e) {
this.setState({EmpName: e.target.value});
}
render() {
return (
<form>
<div >
<input
type="text"
id="EmpName"
placeholder="Emp Name"
value={this.state.EmpName}
onChange={this.updateEmpName} />
</div>
</form>
);
}
}
I am able to get the response and can use it only in render(). and I wanted API response in GetData() or any other method so that i can set the state of there and populate controls. not in render. any idea how can i achieve this?

Answer 1

Well you need to save the response somewhere. I could be just variable outside of component or it could be component property. For example,
class YourComponent extends React.Component {
constructor() {
// your code ...
this.response = null;
}
callApi() {
const self = this;
$.ajax({
// your code ...
success: function(response) {
self.response = response;
}
})
}
someOtherMethod() {
console.log(this.response)
}
}

Answer 2

I would suggest you to make api call in life cycle method componentDidMount not in componentWillReceiveProps as recommended in react docs.
Need to change your api call method a little bit.
ApiCall(props) {
return $.ajax({
url: 'http://localhost:8081/getdata',
type: 'POST',
data: {Empnumber:props.Empnumber}
}).fail((responseData) => {
if (responseData.responseCode) {
console.error(responseData.responseCode);
}
});
}
Basically above call will return you a jquery promise which you can use later.
Now in what ever method you want to make ApiCall just use like this -
GetData(props,EmpCollection)
{
this.ApiCall(props)
.then(
function(data){
console.log(data);
// set the state here
},
function(error){
console.log(error);
}
);
}