The Movie Database Support

Hi, I'm working on a project and I'm trying to create a Netflix clone site. My goal is to show the cover titles of the movies, on a Homepage main banner. to do this I created the following three files inside my folder:

1. axios.js

import axios from "axios";

const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3"
});

export default instance;

2. Requests.js

const API_KEY = "___MY API____";

const requests = {
    fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
    fetchNetflixOriginals: `/discover/tv?api_key=${API_KEY}&with_networks=213`,
    fetchComedyMovies: `/discover/movie?api_key=${API_KEY}&with_genres=35`,
    fetchHorrorMovies: `/discover/movie?api_key=${API_KEY}&with_genres=27`,
    fetchRomanceMovies: `/discover/movie?api_key=${API_KEY}&with_genres=10749`,
    fetchDocumentaries: `/discover/movie?api_key=${API_KEY}&with_genres=99`,
};

export default requests;

3. Banner.js

import React, { useEffect, useState } from 'react';
import "./Banner.css";
import axios from "./axios"
import requests from "./Requests";

function Banner() {

    const [movie, setMovie] = useState([]);


    useEffect(() => {
        async function fetchData() {
            const request = await axios.get(requests.fetchNetflixOriginals);
            setMovie(
                request.data.results[
                Math.floor(Math.random() * request.data.results.lenght - 1)
                ]
            );
            return requests;
        }

        fetchData();
    }, [])

    console.log(movie);

The problem is that when I try to do the "console.log" it returns a 404 error and an empty array.

The background of the banner goes from black to completely white and no films appear on my banner.

This makes me assume that there is some error in the code or some problem in the API. Could someone please check the code and help me figure out where the error is? Thank you!

2 replies (on page 1 of 1)

Jump to last post

There is at least one error : "lenght" need to be replaced by "length".

For coding specific issues like this, I usually recommend heading over to Stack Overflow as you can ask platform and library specific question to users who are familiar with it. I'm not familiar with Axios so I won't be much help.

Can't find a movie or TV show? Login to create it.

Global

s focus the search bar
p open profile menu
esc close an open window
? open keyboard shortcut window

On media pages

b go back (or to parent when applicable)
e go to edit page

On TV season pages

(right arrow) go to next season
(left arrow) go to previous season

On TV episode pages

(right arrow) go to next episode
(left arrow) go to previous episode

On all image pages

a open add image window

On all edit pages

t open translation selector
ctrl+ s submit form

On discussion pages

n create new discussion
w toggle watching status
p toggle public/private
c toggle close/open
a open activity
r reply to discussion
l go to last reply
ctrl+ enter submit your message
(right arrow) next page
(left arrow) previous page

Want to rate or add this item to a list?

Login