how to add load more button with api-CodePudding

this is my code plz help me . i don't know how to use the api to add load more button can anyone tell me how to fix it plz thank you all.

thank you all. thank you all. thank you all. thank you all. thank you all. thank you all.

import React, { useState, useEffect } from "react";
import Cards from "../card/Cards";
import { useParams } from "react-router-dom";

const MovieList = () => {
  const [movieList, setMovieList] = useState([]);
  const { type } = useParams();

  useEffect(() => {
    getData();
  }, [type]);

  const getData = () => {
    fetch(
      `https://api.themoviedb.org/3/movie/${
        type ? type : "popular"
      }?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US`
    )
      .then((res) => res.json())
      .then((data) => setMovieList(data.results));
  };
  return (
    <div className="movie__list">
      <h2 className="list__title">{(type ? type : "POPULAR").toUpperCase()}</h2>
      <div className="list__cards">
        {movieList.map((movie) => (
          <Cards movie={movie} />
        ))}
      </div>
    </div>
  );
};

export default MovieList;

CodePudding user response：

this is my full code

import React, { useState, useEffect } from "react";
import Cards from "../card/Cards";
import { useParams } from "react-router-dom";

const MovieList = () => {
  const [movieList, setMovieList] = useState([]);
  const { type } = useParams();
  const [page, setPage] = useState(1);
  const [blog, setBlogs] = useState([]);

  useEffect(() => {
    getData();
  }, [type]);

  const getData = () => {
    fetch(
      `https://api.themoviedb.org/3/movie/${
        type ? type : "popular"
      }?api_key=4e44d9029b1270a757cddc766a1bcb63&language=en-US`
    )
      .then((res) => res.json())
      .then((data) => setMovieList(data.results));
  };

  useEffect(() => {
    const newURL = `https://api.themoviedb.org/3/movie/${
      type ? type : "popular"
    }?api_key=4e66d9029b1580a757dccc788c1bgh87&language=en-US&page=${page}`;
    fetch(newURL)
      .then((res) => res.json())
      .then((data) => {
        //here I'm assuming the returned data is an array of movies
        if (page > 1) {
          setMovieList((prevData) => [...prevData, ...data]);
        } else {
          setMovieList(data);
        }
      });
  }, [page]);

  return (
    <div className="movie__list">
      <h2 className="list__title">{(type ? type : "POPULAR").toUpperCase()}</h2>
      <div className="list__cards">
        {movieList.map((movie) => (
          <Cards movie={movie} />
        ))}
      </div>
      <div className="loadmore">
        <button onClick={() => setPage(page   1)}>Load more</button>
      </div>
    </div>
  );
};

export default MovieList;

CodePudding user response：

Please try:

import React, { useState, useEffect } from "react";
import Cards from "../card/Cards";
import { useParams } from "react-router-dom";

const MovieList = () => {
  const [movieList, setMovieList] = useState([]);
  const { type } = useParams();
  const [page, setPage] = useState(1);
  const [blog, setBlogs] = useState([]);

  useEffect(() => {
    const newURL = `https://api.themoviedb.org/3/movie/${
      type ? type : "popular"
    }?api_key=4e66d9029b1580a757dccc788c1bgh87&language=en-US&page=${page}`;
    fetch(newURL)
      .then((res) => res.json())
      .then((data) => {
        //here I'm assuming the returned data is an array of movies
        if (page > 1) {
          setMovieList((prevData) => ([...prevData, ...data.result]);
        } else {
          setMovieList(data.result);
        }
      });
  }, [page, type]);

  return (
    <div className="movie__list">
      <h2 className="list__title">{(type ? type : "POPULAR").toUpperCase()}</h2>
      <div className="list__cards">
        {movieList.map((movie) => (
          <Cards movie={movie} />
        ))}
      </div>
      <div className="loadmore">
        <button onClick={() => setPage(page   1)}>Load more</button>
      </div>
    </div>
  );
};

export default MovieList;