Issue with react state not updating/incrementing

Question

I'm trying to do pagination by clicking on some text that calls a method to increment the state value. The state value then gets passed to the axios call which should then call the next page. I'm noticing however that while the state is getting increment in a console.log from the render function, the axios call is not getting called again with the new state value. Anyone have any idea how I can fix this?

 constructor(props) { super(props); this.state = { people: [], planets: [], page: 1 }; this.pageIncrementer = this.pageIncrementer.bind(this); } componentWillMount() { let page = this.state.page; axios({ method: 'GET', url: `http://localhost:3008/people?_page=${page}&_limit=10` }).then((response) => { this.setState({ people: response }); }).catch((error) => { console.log('There is an error in the Card axios call for people: ', error); }) axios({ method: 'GET', url: `http://localhost:3008/planets?_page=${page}&_limit=10` }).then((response) => { this.setState({ planets: response }); }).catch((error) => { console.log('There is an error in the Card axios call for planets: ', error); }) } pageIncrementer() { this.setState({ page: this.state.page + 1 }); } 

Answer 1

componentWillMount called only once, you need componentDidUpdate https://facebook.github.io/react/docs/react-component.html#componentdidupdate

let getData = () => Math.random();

class Example extends React.Component{
        constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this)
          this.state = {
                name: ''
          };
        }

        componentWillMount(){
             console.log('componentWillMount')
        }

        componentDidUpdate(){
             console.log('componentDidUpdate') 
        }

        handleChange(e) {
          this.setState({
            name: this.props.getData()
          });
        }


        render() {
            return <div className="widget"> 
            {this.state.name}
            <button onClick={this.handleChange}>Inc</button>

            </div>;
        }
      }

      React.render(<Example getData={getData}/>, document.getElementById('container'));

Edit(alternative way):

let getData = () => Math.random();

class Example extends React.Component{
        constructor(props) {
          super(props);
          this.makeRequest = this.makeRequest.bind(this)
          this.state = {
                page:1,
                name:''
          };
        }

        makeRequest(next){
             fetch('https://jsonplaceholder.typicode.com/posts/'+this.state.page)
             .then(
                result => {
                 console.log('do')
                 return result.json()}
             )
             .then(
                 (resp) => this.setState({
                 name:resp, page:this.state.page+1})
             )
        }


        render() {
            return <div className="widget"> 
            {this.state.name}
            <button onClick={this.makeRequest}>Request</button>

            </div>;
        }
      }

      React.render(<Example getData={getData}/>, document.getElementById('container'));