title: How to update the state in react?
body: <p>I'd like to update the state and display the current state in a React Fragment inside a method. I'm updating the state in reserve method and I'd like to display the new value on a button click. I was trying to do that in the span in fetchData() method but when I click the button, I don't see the updated value. Below is the screen shot of the application and code.
  <a href="https://i.stack.imgur.com/RcFIA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RcFIA.png" alt="enter image description here" /></a></p>
  <pre><code>class BooksComponent extends Component{
  
      constructor(props){
          super(props)
          this.state ={
              booksData: [],
              offset: 0,
              perPage: 3,
              currentPage: 0,
          }
          this.reserve = this.reserve.bind(this)
          this.fetchData = this.fetchData.bind(this)
      }
  
      fetchData(){
          axios.get('/library')
            .then(res =&gt; {
              const booksData = res.data
              const slice = booksData.slice(this.state.offset, this.state.offset + this.state.perPage)
              const books = slice.map(book =&gt; 
              &lt;React.Fragment key={book.id}&gt;
                  &lt;p&gt;{book.id} - {book.title} - {book.author}&lt;/p&gt;
                  &lt;button onClick={() =&gt; this.reserve(book.id)}&gt;Reserve {book.quantity}&lt;/button&gt;
                  &lt;span&gt;{this.state.booksData.quantity}&lt;/span&gt;
              &lt;/React.Fragment&gt;)
  
              this.setState({ 
                  pageCount: Math.ceil(booksData.length / this.state.perPage),
                  books })
            })
      }
  
      handlePageClick = (e) =&gt; {
          const selectedPage = e.selected;
          const offset = selectedPage * this.state.perPage;
  
          this.setState({
              currentPage: selectedPage,
              offset: offset
          }, () =&gt; {
              this.fetchData()
          });
      };
      
      componentDidMount() {
          this.fetchData()
      }
      
      render() {
          return (
            &lt;div className=&quot;App&quot;&gt;
                {this.state.books}
              &lt;ReactPaginate
                      previousLabel={&quot;prev&quot;}
                      nextLabel={&quot;next&quot;}
                      breakLabel={&quot;...&quot;}
                      breakClassName={&quot;break-me&quot;}
                      pageCount={this.state.pageCount}
                      marginPagesDisplayed={2}
                      pageRangeDisplayed={5}
                      onPageChange={this.handlePageClick}
                      containerClassName={&quot;pagination&quot;}
                      subContainerClassName={&quot;pages pagination&quot;}
                      activeClassName={&quot;active&quot;}/&gt;
            &lt;/div&gt;
          )
      }
  
      reserve(id) {
          console.log(&quot;clicked&quot;)
          this.setState({
              booksData: this.state.booksData.map(item =&gt; {
                  if (item.id === id) {
                      return { ...item, quantity: (item.quantity - 1) &gt;= 0 ? (item.quantity - 1) : 0};
                  } else {
                      return item;
                  }
              })
          })
      }
  }
  
  
  export default BooksComponent
  </code></pre>