Add more data to state whilst keeping original (React) - reactjs

Question

I have an app that get data from an API as a page. I've added functionality to get the next page of the data and set it to state.
I want to be able to get the next pages data but rather than replace the state I want to add the next page value.
Here is the code
const TopRatedPage = () => {
const [apiData, setApiData] = useState([]);
const [isLoading, setLoading] = useState(false);
const [pageNumber, setPageNumber] = useState(1);
const { results = [] } = apiData;
useEffect(() => {
setLoading(true);
fetchTopRatedMovies(pageNumber).then((data) => setApiData(data));
setLoading(false);
}, [apiData, pageNumber]);
return (
<div className='top-rated-page-wrapper'>
<h1>TopRatedPage</h1>
{isLoading ? <h1>Loading...</h1> : <MovieList results={results} />}
<button
onClick={() => {
setPageNumber(pageNumber + 1);
}}>
MORE
</button>
</div>
);
I've tried setApiData(...apiData,data) but it gives error, apiData is not iterable.
Here is the data returned Object { page: 1, total_results: 5175, total_pages: 259, results: (20) […] }
To clarify I want to be able to allow user to click button that adds more API data to state and display more.

Answer 1

Updated to reflect the shape of the object returned by your api call.
One way to handle this, as demonstrated below, is to replace the page metadata (page, total_results, total_pages) in your component's state with the info from latest api call, but append the results each time.
If you don't care about the paging information you could just drop it on the floor and store only the results, but keeping it around lets you display paging info and disable the 'load more' button when you get to the end.
Displaying the current page and total pages might not make sense given that you're just appending to the list (and thus not really "paging" in the UI sense), but I've included it here just to provide a sense of how you might use that info if you chose to do so.
The key thing in the snippet below as it relates to your original question is the state merging:
const more = () => {
fetchTopRatedMovies(page + 1)
.then(newData => {
setData({
// copy everything (page, total_results, total_pages, etc.)
// from the fetched data into the updated state
...newData,
// append the new results to the old results
results: [...data.results, ...newData.results]
});
});
}
I'm using spread syntax to copy all of the fields from newData into the new state, and then handling the results field separately because we want to replace it with the concatenated results. (If you left the results: [...data.results, ...newData.results] line out, your new state would have the results field from newData. By specifying the results field after ...newData you're replacing it with the concatenated array.
Hope this helps.
/*
Your api returns an object with the following shape.
I don't know what the individual results entries look like,
but for our purposes it doesn't really matter and should be
straightforward for you to tweak the following code as needed.
{
page: 1,
total_results: 5175,
total_pages: 259,
results: [
{
title: 'Scott Pilgrim vs. The World',
year: 2010,
director: 'Edgar Wright'
},
{
title: 'Spiderman: Into the Spider-Verse',
year: 2018,
director: ['Bob Persichetti', 'Peter Ramsey', 'Rodney Rothman']
},
{
title: 'JOKER',
year: 2019,
director: 'Todd Phillips'
},
];
}
*/
const {useState} = React;
// simulated api request; waits half a second and resolves with mock data
const fetchTopRatedMovies = (page = 0) => new Promise((resolve) => {
// 5 is arbitrary
const numPerPage = 5;
// generate an array of mock results with titles and years
const results = Array.from(
{length: numPerPage},
(_, i) => ({
title: `Movie ${(page - 1) * numPerPage + i}`,
year: Math.floor(Math.random() * 20) + 2000
})
);
// 16 is arbitrary; just to show how you can disable
// the 'more' button when you get to the last page
const total_results = 16;
// the return payload
const data = {
page,
total_results,
total_pages: Math.floor(total_results / numPerPage),
results
}
setTimeout(() => resolve(data), 500);
});
const Demo = () => {
const [data, setData] = useState({ page: 0, results: [] });
const more = () => {
fetchTopRatedMovies(page + 1)
.then(newData => {
setData({
// copy everything (page, total_results, total_pages, etc.)
// from the fetched data into the updated state
...newData,
// append the new results to the old results
results: [...data.results, ...newData.results]
});
});
}
// pull individual fields from state
const {page, results, total_results, total_pages} = data;
// are there more pages? (used to disable the button when we get to the end)
const hasMore = page === 0 || (page < total_pages);
return (
<div className='wrapper'>
<div>
{total_pages && (
<div>
<div>Page: {page} of {total_pages}</div>
<div>Total: {total_results}</div>
</div>
)}
<button disabled={!hasMore} onClick={more}>More</button>
<ul>
{results.map(m => (
<li key={m.title}>{m.title} - ({m.year})</li>
))}
</ul>
</div>
<div>
<h3>component state:</h3>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
</div>
);
};
ReactDOM.render(
<Demo />,
document.getElementById('demo')
);
/* purely cosmetic. none of this is necessary */
body {
font-family: sans-serif;
line-height: 1.6;
}
.wrapper {
display: flex;
background: #dedede;
padding: 8px;
}
.wrapper > * {
flex: 1 1 50%;
background: white;
margin: 8px;
padding: 16px;
}
h3 {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.0/umd/react-dom.production.min.js"></script>
<div id="demo" />