React netflix clone mapping image problem

user_17271217 0
Viewed 49

i am a beginner in coding. Trying to learn react. i tried creating a netflix clone. While i am trying to render images for different category of movies it is not displaying in the browser. And console shows the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')

import './App.css';
import Nav from './Nav';
import Banner from './Banner'
import Row from './Row';
import requests from './requests';




function App() {
  return (
    <div className="app">
      <Nav/>
      <Banner/>
      <Row/>

      <Row
      title= {requests.fetchNetflixOriginals}
      isLargeRow={true}
      />

      <Row title="Trending Now" fetchurl={requests.fetchTrending} />
      <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="Documentaries" fetchurl={requests.fetchDocumentaries} />




    </div>
  );
}

export default App;

import React, {useState,useEffect} from 'react';
import './Row.css'
import axios from 'axios'
import YouTube from 'react-youtube'
import movietrailer from 'movie-trailer'



function Row({title, fetchurl, isLargeRow}) {

    const base_url= "https://image.tmdb.org/t/p/original/";
    const[movies, setMovies]= useState([]);
    const[trailerurl, setTrailerurl]= useState("");

    useEffect(()=> {
        async function fetchData() {
            const request = await axios.get(fetchurl);
            setMovies(request.data.results);
            return request;
        }

        fetchData();
    }, [fetchurl]);
    
  return (
    <div className="row">
        <h2>{title}</h2>
    <div className="row__posters">
    {movies.map((movie) => (
            <img 
                src={`${base_url}${
                    isLargeRow ? movie.poster_path : movie.backdrop_path
                }`} 
                alt={movie.name}
            />
      ))}
    </div>
    </div>
  )
}

export default Row

netflix reactjs mapping javascript
2 Answers

u can search the where the protocol is,find why its undefinde

user_171083850

You may put console.log(request) just after const request = ... to check.

The error occurs in promise when anything can not get response after requesting. In promise function it always waits for response or reject. There in your code is promise function in useEffect at Row function,


       async function fetchData() {
            const request = await axios.get(fetchurl);
            setMovies(request.data.results);
            return request;
        }

As promise function ask request(axios.get(fetchurl)), it waits for response or reject. Wether it's response or reject the code will runs as it is coded. In the code, after requesting, it goes on with setMovies(request.data.results) with the result. But if the result is undefined then it gives error. So you can handle if the error occurs with code. Or you can check the error. You may put console.log(request) just after const request = ....

user_110101120
Related