Netflix clone using React Js axios error
Tags: help, react, axios
Published: 2022-02-14 19:49:26

So i am following a tutorial on youtube which is a netflix clone (https://www.youtube.com/watch?v=1TCw9wO1neA&t=7379s) at 2:03:01. Basically the step is to use TMDB api to pull back data from different genres and this would then be populated into individual rows. I have used the api to dynamically pull data back to fit the hero image/banner. Everytime you refresh it automatically pulls back a new film.

I am currently using react js and axios to pull the data.

So i have used the useEffect() hook which should be fetching data based upon the requests file which have been bought into the row.js component as props. if the code is working properly it should be bringing back 9 arrays of data.


one of the problems was somehow i put the data into the 'export default' statement which i though could be the error so i sorted the code out. and it still doesnt seem to be working. im not sure where to go from here.

As it is not working i am getting the following errors: 
Uncaught (in promise) Error: Provided config url is not valid
    at Axios.request (Axios.js:40:1)
    at Axios.<computed> [as get] (Axios.js:136:1)
    at Function.wrap [as get] (bind.js:9:1)
    at fetchData (Row.js:11:1)
    at Row.js:15:1
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)

GET https://image.tmdb.org/t/p/original/undefined 404

The row.js file is the one which i am currently having problems with. when i manually copy the base url and the fetch variable and normally search for them in the address bar it is bringing back json data : https://api.themoviedb.org/3/discover/movie?api_key=*********************&with_genres=27

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktezbrcqo1zezp5bll3c.png)
SO the image above is the kind of data i would expect to see in my console log but it is not appearing for some reason.

Row.js 
`import axios from 'axios'
import React, { useState, useEffect } from 'react';
import './Row.css'

function Row({ title, fetchUrl, isLargeRow = false }) {

    const [movies, setMovies] = useState([])

    useEffect(() => {
        async function fetchData() {
            const request = await axios.get(fetchUrl)
            setMovies(request.data.results)
            return request
        }
        fetchData()
    }, [fetchUrl])
    console.log(movies)

    return (
        <div className="row">
            <h2>{title}</h2>
        </div>
    )
}
export default Row `

Axios.js
`import axios from 'axios'

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

export default instance;`

requests.js 
`const API_KEY = "**********"


const requests = {
    fetchTrending: `/trending/all/week?api_key=${API_KEY}&language=en-US`,
    fetchNetflixOriginal: `/discover/tv?api_key=${API_KEY}&with_networks=213`,
    //fetchTopRated: `/movie/top_rated&api_key=${API_KEY}&language=en-US`,
    fetchActionMovies: `/discover/movie?api_key=${API_KEY}&with_genres=28`,
    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;`

HomeScreen.js
`import React from 'react';
import Nav from './Nav';
import './HomeScreen.css'
import Banner from './Banner';
import requests from './Requests';
import Row from './Row';

function HomeScreen() {
    return (
        <div className='homeScreen'>

            <Nav />

            <Banner />

            <Row title='Netflix Originals' fetchURL={requests.fetchNetflixOriginal} isLargeRow />

            <Row title='Top Rated' fetchUrl={requests.fetchTopRated} />

            <Row title='Action Movies' fetchURL={requests.fetchActionMovies} />

            <Row title='Comedy Movies' fetchURL={requests.fetchComedyMovies} />

            <Row title='Horror Movies' fetchURL={requests.fetchHorrorMovies} />

            <Row title='Romance Movies' fetchURL={requests.fetchRomanceMovies} />

            <Row title='Documentaries' fetchURL={requests.fetchDocumentaries} />
        </div>
    )

}

export default HomeScreen;`

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.fetchTrending)
            setMovie(
                request.data.results[
                Math.floor(Math.random() * request.data.results.length - 1)
                ]
            )
        }
        fetchData()
    }, [])

    console.log(movie);

    function truncate(string, n) {
        return string?.length > n ? string.substr(0, n - 1) + '...' : string
    }



    return (
        <header className='banner' style={{
            backgroundSize: "cover",
            backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie?.backdrop_path}")`,
            backgroundPosition: "center center"
        }}>
            <div className='banner__contents'>
                <h1 className='banner__title'>{movie?.name || movie?.title || movie?.original_name}</h1>
                <div className="banner__buttons">
                    <button className='banner__button'>Play</button>
                    <button className='banner__button'>My List</button>
                </div>
                <h1 className="banner__description">{truncate(movie?.overview, 150)}
                </h1>
            </div>

            <div className="banner--fadeBottom" />
        </header>

    )
}

export default Banner;`