update Axios Url with Onclick event in react - reactjs

Question

I am working on an API using axios:
constructor(props) {
super(props);
this.state = {
url:[],
title:'anime',
limit:6,
}
this.more_button.bind(this)
}
componentDidMount() {
//limit is on the end of the url
const limit= this.state.limit
axios.get(`http://api.giphy.com/v1/gifs/search?q=sth&api_key=MY_KEY&limit=` + limit)
.then(res => {
const url= res.data.data;
this.setState({ url });
})
}
I want to change limit when i click on a button;
and i do it like this:
more_button=()=>{
this.setState((previousState) => {
return { limit: previousState.limit + 6 };
});
this.componentDidMount();
}
The problem is that i should click that button twice in order to work.
render part:
render(){
return(
<div className="container">
<button
onClick={this.more_button} >
Give me More!
</button>
)
}
}

Answer 1

ComponentDidMount is a lifecycle method. Don't call this function manually,Try below code.
componentDidMount() {
//limit is on the end of the url
this.apiCall();
}
apiCall() {
const limit= this.state.limit
axios.get(`http://api.giphy.com/v1/gifs/search?q=sth&api_key=MY_KEY&limit=` + limit)
.then(res => {
const url= res.data.data;
this.setState({ url });
})
}
more_button = () => {
this.setState((previousState) => {
return { limit: previousState.limit + 6 };
});
this.apiCall();
}
Change your render onClick method like:
onClick={()=>this.more_button}
Finally add extra line in constructor:
constructor(props) {
super(props);
this.state = {
url:[],
title:'anime',
limit:6,
}
this.apiCall = this.apiCall.bind(this);
this.more_button = this.more_button.bind(this);
}