updating data in useState constant | React

Question

I'm trying to make "load more" pagination in react app fetching data from google books api via axios. Firstly I'm grabbing data by submitting the form and setting it into the bookResponse const and then putting the value of bookResponse const into the booksArray const by setBooksArray(bookReponse). Secondly I need to show more book's by clicking the 'Load More' button. By click I make a new request to the api and receive the response. I'm updating the bookResponse const with new data and trying to update the booksArray const by setBooksArray(booksArray + bookResponce) but it returns errror "books.map is not a function". How can i solve the problem?

{books && books.map(book => (
        <div key={book.id}>
            <img alt="book's thumbnail" src={book.volumeInfo.imageLinks.thumbnail} />
            <div>
                <h5>{book.volumeInfo.title}</h5>
                <p>{book.volumeInfo.authors}</p>
                <p>{book.volumeInfo.categories}</p>
            </div>
        </div>
    ))
    }

function App() {
  const [bookName, setBookName] = useState('')
  const [bookCategory, setBookCategory] = useState('all')
  const [bookFilter, setBookFilter] = useState('relevance')
  const [bookResponse, setBookResponse] = useState([])
  const [booksArray, setBooksArray] = useState([])
  const apiKey = ('MY_KEY')
  const [showLoadMoreButton, setShowLoadMoreButton] = useState(false)

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(bookName, bookCategory, bookFilter)

    axios.get(endpoint)
    .then(res => {
        console.log(res.data.items)
        setBookResponse(res.data.items)
        setBooksArray(bookResponse)
        console.log(bookResponse ,booksArray)
    })
    setShowLoadMoreButton(true)
  }
  const handleLoadMore = (e) => {
    e.preventDefault()

    axios.get(endpoint)
    .then(res => {
        console.log(res.data.items)
        console.log(bookResponse)
        setBookResponse(bookResponse)
        setBooksArray(booksArray + bookResponse)
    })
  }

Answer 1

You don't + to add 2 arrays, you can do something like this.

setBooksArray( prev => [ ...prev, ...bookResponse ] )
....
return (
      ....
      { booksArray.map(book => ( .....) }
      .....
)

Answer 2

if booksArray and bookResponse types are array you can use this:

setBooksArray([...booksArray,...bookResponse])

Answer 3

When you do booksArray + bookResponse you are creating a string, example would be

const arr1 = [1,2,3]
const arr2 = [4,5,6]
console.log(arr1 + arr2)
"1,2,34,5,6"

The solution would be to spread both of the arrays like this:

setArray([...arr1, ...arr2])