How to update the state in react? - reactjs

Question

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.
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 => {
const booksData = res.data
const slice = booksData.slice(this.state.offset, this.state.offset + this.state.perPage)
const books = slice.map(book =>
<React.Fragment key={book.id}>
<p>{book.id} - {book.title} - {book.author}</p>
<button onClick={() => this.reserve(book.id)}>Reserve {book.quantity}</button>
<span>{this.state.booksData.quantity}</span>
</React.Fragment>)
this.setState({
pageCount: Math.ceil(booksData.length / this.state.perPage),
books })
})
}
handlePageClick = (e) => {
const selectedPage = e.selected;
const offset = selectedPage * this.state.perPage;
this.setState({
currentPage: selectedPage,
offset: offset
}, () => {
this.fetchData()
});
};
componentDidMount() {
this.fetchData()
}
render() {
return (
<div className="App">
{this.state.books}
<ReactPaginate
previousLabel={"prev"}
nextLabel={"next"}
breakLabel={"..."}
breakClassName={"break-me"}
pageCount={this.state.pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={this.handlePageClick}
containerClassName={"pagination"}
subContainerClassName={"pages pagination"}
activeClassName={"active"}/>
</div>
)
}
reserve(id) {
console.log("clicked")
this.setState({
booksData: this.state.booksData.map(item => {
if (item.id === id) {
return { ...item, quantity: (item.quantity - 1) >= 0 ? (item.quantity - 1) : 0};
} else {
return item;
}
})
})
}
}
export default BooksComponent

Answer 1

Don't store jsx in your state, store the data and let React handle the render, so, just do this in your fetchData function
this.setState({
pageCount: Math.ceil(booksData.length / this.state.perPage),
books
})
and in your render
<div className="App">
{this.state.books.map(book =>
<React.Fragment key={book.id}>
<p>{book.id} - {book.title} - {book.author}</p>
<button onClick={() => this.reserve(book.id)}>Reserve {book.quantity}</button>
<span>{this.state.booksData.quantity}</span>
</React.Fragment>
)}
<ReactPaginate...
</div>
This will re-render when the state changes and will display the correct value