Alforoan•2y ago

✅ – 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);...

Jump to solution

16 Replies

ghardin137•2y ago

do you want to grab them all at once or when needed?

Alforoan•2y 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

ghardin137•2y ago

do you know ahead of time how many pages there are?

Alforoan•2y ago

💀

ghardin137•2y ago

yeah you probably don't want to load all of that at once

Alforoan•2y ago

i was thinking add a load more button at the bottom

ghardin137•2y ago

what would you use it all at once for?

Alforoan•2y ago

ive never done it so i didnt know what u were asking for lol

ghardin137•2y ago

if you're trying to do a load more you'd just append the data to your state when you fetch it

Alforoan•2y ago

so make multiple state hooks?

ghardin137•2y 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);
  }

  .....
}

Alforoan•2y 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();
  }, []);

ghardin137•2y 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

ghardin137•2y 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]);

Alforoan•2y ago

ok, that's helpful. ty 🙂

reactibot•2y ago

This question has an answer! Thank you for helping 😄 If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1060038954260373575 This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1060038954260373575