✅ – Alforoan – 03-36 Jan 4

if an api link gives me only one page of a collection of movies and i want multiple pages how do i combine the data? i can get 2nd,3rd, 4th, etc. pages by changing the link at the end to page=(number)
Solution:
```js const [currentPage, setCurrentPage] = useState(1); const FetchMovies = async (page) => { const response = await fetch(url+page);...
G
ghardin137470d ago
do you want to grab them all at once or when needed?
A
Alforoan470d ago
well actually i suppose i can just copy paste all of them into a data file, right i wanted to grab them all at once
G
ghardin137470d ago
do you know ahead of time how many pages there are?
A
Alforoan470d ago
💀
G
ghardin137470d ago
yeah you probably don't want to load all of that at once
A
Alforoan470d ago
i was thinking add a load more button at the bottom
G
ghardin137470d ago
what would you use it all at once for?
A
Alforoan470d ago
ive never done it so i didnt know what u were asking for lol
G
ghardin137470d ago
if you're trying to do a load more you'd just append the data to your state when you fetch it
A
Alforoan470d ago
so make multiple state hooks?
G
ghardin137470d ago
nah just one
const MyList = () => {
const [list, setList] = useState([]);
const [currentPage, setCurrentPage] = useState(1);

useEffect(() => {
fetch(url).then(data => setList(previous => [...previous, ...data] ));
}, [currentPage])

const loadMore = () => {
setCurrentPage(previous => previous + 1);
}

.....
}
const MyList = () => {
const [list, setList] = useState([]);
const [currentPage, setCurrentPage] = useState(1);

useEffect(() => {
fetch(url).then(data => setList(previous => [...previous, ...data] ));
}, [currentPage])

const loadMore = () => {
setCurrentPage(previous => previous + 1);
}

.....
}
A
Alforoan470d ago
for the fetching part, whats the diff btwn urs and something like this
const FetchMovies = async () => {
const response = await fetch(url);
const movies = await response.json();
setMovies(movies.results);
};

React.useEffect(() => {
FetchMovies();
}, []);
const FetchMovies = async () => {
const response = await fetch(url);
const movies = await response.json();
setMovies(movies.results);
};

React.useEffect(() => {
FetchMovies();
}, []);
G
ghardin137470d ago
i'm appending the data to the end of the list array whereas you're replacing the array but you could do it like this
Solution
G
ghardin137470d ago
const [currentPage, setCurrentPage] = useState(1);

const FetchMovies = async (page) => {
const response = await fetch(url+page);
const movies = await response.json();
setMovies(prev => [...prev, ...movies.results]);
};

React.useEffect(() => {
FetchMovies(currentPage);
}, [currentPage]);
const [currentPage, setCurrentPage] = useState(1);

const FetchMovies = async (page) => {
const response = await fetch(url+page);
const movies = await response.json();
setMovies(prev => [...prev, ...movies.results]);
};

React.useEffect(() => {
FetchMovies(currentPage);
}, [currentPage]);
A
Alforoan470d ago
ok, that's helpful. ty 🙂
UU
Unknown User470d ago