how can i solve this problem with pagination and a api?

Viewed 23

i am using TMDB api to make a movie and series website and i tried to use pagination to show more movies in one session and got this error: '.map is not a function'

if I take the map it receives the information from the api on the console but I can't show it on the screen without the map

here is the code:

import ReactPaginate from 'react-paginate';
const imageUrl = import.meta.env.VITE_URL_BACKGROUND;
import '../components/components-home/PaginationCss.css';
const moviesURL = import.meta.env.VITE_API;
const apiKey = import.meta.env.VITE_API_KEY;
const Home = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const getComments = async () => {
      const res = await fetch(`${moviesURL}popular?${apiKey}&page=1`);
      const data = await res.json();

      setItems(data.results);
    };
    getComments();
  }, []);

  console.log(items);

  const fetchComments = async (currentPage) => {
    const res = await fetch(
      `${moviesURL}popular?${apiKey}&page=${currentPage}`
    );
    const data = await res.json();
    return data;
  };
  const handlePageClick = async (data) => {
    console.log(data.selected);

    let currentPage = data.selected + 1;

    const commentsFormServer = await fetchComments(currentPage);

    setItems(commentsFormServer);
  };
  return (
    <div className=''>
      <div className=''>
        {items.map((item) => {
          return (
            <div className=''>
              <div className=''>
                <div className=''>
                  <img src={imageUrl + item.poster_path} alt='' />
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <ReactPaginate
        previousLabel={'<<'}
        nextLabel={'>>'}
        breakLabel={'...'}
        pageCount={15}
        marginPagesDisplayed={3}
        pageRangeDisplayed={6}
        onPageChange={handlePageClick}
        containerClassName={'pagination'}
        activeClassName={'active'}
      />
    </div>
  );
};

export default Home;
0 Answers
Related