Concat object to state object - reactjs

Question

I am trying to manage my local state whilst also updating an API which holds a list of books. In this setup, when the updateShelf method recieves a book and a shelf, it checks to see if book is already in the book state, if not it should concat the book param on the book state. Struggling to work out how to do this.
class BooksApp extends React.Component {
state = {
books: []
};
componentDidMount() {
console.log("MOUNTING");
BooksAPI.getAll().then(books => {
this.setState({ books });
});
}
selectStateUpdate = (book, shelf) => {
this.updateShelf(book, shelf);
};
updateShelf = (book, shelf) => {
BooksAPI.update(book, shelf).then(() => {
let bookscopy = { ...this.state.books };
console.log(bookscopy);
for (let i = 0; this.state.books.length > i; i++) {
if (this.state.books[i].title === book.title) {
bookscopy[i].shelf = shelf;
this.setState({ bookscopy });
} else
this.setState({
books: bookscopy.concat(book)
});
}
});
};
}
Project for reference > here.

Answer 1

you can leverage setState with function and do it like this
updateShelf = (book, shelf) => {
BooksAPI.update(book, shelf)
.then(() => {
this.setState(prevState => {
const updatedBook = prevState.books
.filter(b => b.title === book.title)
.map(_book => ({
..._book,
shelf
}))
return {
books: [
...prevState.books.filter(b => b.title !== book.title),
updatedBook
]
}
})
})
}
What it does ?
Gets the book and remap it with filter && reduce function
Returns new state composed with all books without the one which is update
Returns the new composed state

Answer 2

You try to update state on every loop iteration:
for (let i=0; this.state.books.length > i; i++) {
if (this.state.books[i].title === book.title) {
bookscopy[i].shelf = shelf;
this.setState({bookscopy})
} else
this.setState({
books: bookscopy.concat(book)
})
}
})
Try something like this:
updateShelf = (book, shelf) => {
BooksAPI.update(book, shelf).then(() => {
this.setState(prevState => {
const bookFromState = prevState.books.find(b => b.title === book.title);
if(bookFromState) {
return null
}
return {
books: [...prevState.books, book]
}
})
}