✅ – Alforoan – 03-36 Jan 4

AAlforoan

1/4/2023

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

Gghardin137

1/4/2023

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

AAlforoan

1/4/2023

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

Gghardin137

1/4/2023

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

AAlforoan

1/4/2023

💀

Gghardin137

1/4/2023

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

AAlforoan

1/4/2023

i was thinking add a load more button at the bottom

Gghardin137

1/4/2023

what would you use it all at once for?

AAlforoan

1/4/2023

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

Gghardin137

1/4/2023

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

AAlforoan

1/4/2023

so make multiple state hooks?

Gghardin137

1/4/2023

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);
  }

  .....
}

AAlforoan

1/4/2023

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();
  }, []);

Gghardin137

1/4/2023

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

Gghardin137

1/4/2023

  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]);

AAlforoan

1/4/2023

ok, that's helpful. ty 🙂

UUUnknown User

1/4/2023

3 Messages Not Public

Looking for more? Join the community!

Reactiflux

✅ – Alforoan – 03-36 Jan 4

Join Server

Reactiflux

✅ – Alforoan – 03-36 Jan 4

Join Server

Want results from more Discord servers?

Add your server

Recommended Posts

✅ – ✅ – Alforoan – 19-31 Jan 2how do u find a length of a list made by filter inside a component?bfrisco – 00-42 Jan 1Is there a purpose of what I am dubbing as "blanket brackets" within functions? Example: ```js await ✅ – Sorrow – 21-59 Dec 30Hi, I'm following this tutorial (https://reactjs.org/tutorial/tutorial.html#showing-the-past-moves) Box Element causing overflows on smaller screens, even though it does not reach the end of screenI am using Material UI with React and Webpack On smaller screens my react box component makes the sc ✅ – _mercury – 21-33 Dec 30I had many instances of divs that each contains an input they are generated dynamically I want ant ✅ – Script – 23-31 Dec 29how can I conditionally render `checked` in this radio input `<input type="radio" checked />`Alex. – 09-19 Dec 29I need to replace the url using regex, current url : `http://localhost:3000/#/test/id/123456&gid=1&p Next-steps scaling up and expandingHey guys, so I wanted your opinion and seek some guidance on how to proceed with this *issue* For so ✅ – mzeeshan – 14-02 Dec 28hello there..... RegExp Question.... i'm beginner in RegExp. i have a variable `search` that contai Cannot display table using ReactHi, I am trying to display a simple table but it is showing me error. Been stuck on this for two we