Update Component on State Change - REACT

Question

I am just starting out with React and have already found myself in a loop. I am building an app that fetches data from a Flask API. Got everything set up so far, but I don't want to display all data on the first page. Rather, I want to split the data from the API and display it 10 at a time.

My problem is that I manage to split the data, but the DOM won't update on state change. Here is my code so far:

import React from 'react';
import Navbar from './Components/Navbar';
import Home from './Components/Home';
import {BrowserRouter as Router, Route, useHistory} from 'react-router-dom'
import Button from '@restart/ui/esm/Button';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        number: 10
    }
  }
 
  updateContent = (prevState) => {
      this.setState({number: this.state.number + 10});
  }
 
  render() {
    return (
      <Router>
        <Navbar />
        <Home perPage={this.state.number} />
            <div class="text-center mt-3 mb-3">
              {this.state.number}
              <Button className='btn btn-primary' onClick={this.updateContent}>Mai multe intrebari</Button>
            </div>
      </Router>
    );
  }
}

export default App;

Even though number is update and I can display the updated {this.state.number} in DOM (in same div as Button ), changing it does not update my Home component:

    <Home perPage={this.state.number} />

where perPage is a prop that I use to fetch data from my API:

useEffect(() => {
    fetch("my_flask_api/v1/?id=" + props.perPage)
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
        },

PS: It works if I manually change number 's value and it updates the DOM correctly, but it won't do it on setState() .

Any ideas are welcome. Thanks in advance!

Answer 1

There are two things that you need to take care of:

1. this.setState(prevState => ({number: prevState.number + 10})) ;
2. your useEffect should have props.perPage as dependancy in the array so it gets the most recently updated value useEffect(() => {...}, [props.perPage])