Getting error while creating code for my netflix-clone

Row.js component code where i am calling the api key Row.js

import React, { useState, useEffect } from 'react';
    
    import axios from 'axios';
    
    export default function Row({title, fetchUrl})  
    {  
      const [movies, setMovies] = useState([])
    
      // A snippet of code that runs based on a specific condition
    
      useEffect(() =>    {
    
        //if [], run once when the row load 
    
          async function fetchData() {
                const request = await axios.get(fetchUrl);
                console.log(request);
          }
          fetchData();
      }, []);
    
      return (
        <div>
          <h2>{title}</h2>
        </div>
      )
    }

JavaScript
​x
 
import React, { useState, useEffect } from 'react';
    
    import axios from 'axios';
    
    export default function Row({title, fetchUrl})  
    {  
      const [movies, setMovies] = useState([])
    
      // A snippet of code that runs based on a specific condition
    
      useEffect(() =>    {
    
        //if [], run once when the row load 
    
          async function fetchData() {
                const request = await axios.get(fetchUrl);
                console.log(request);
          }
          fetchData();
      }, []);
    
      return (
        <div>
          <h2>{title}</h2>
        </div>
      )
    }
​

axios.js

import axios from "axios";

// base url to make requests to the movie database

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

export default instance;

JavaScript
 
import axios from "axios";
​
// base url to make requests to the movie database
​
const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3",
});
​
export default instance;
​

Error in the console log is below one, I got the API key from TMBD Api and it was working fine with postman but here in react it is not working properly.

Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}message: "Request failed with status code 404"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: '<!DOCTYPE html>n<html lang="en">n<head>n<meta char…not GET /trending/all/week</pre>n</body>n</html>n', status: 404, statusText: 'Not Found', headers: {…}, config: {…}, …}[[Prototype]]: Error
fetchData @ Row.js:13
await in fetchData (async)
(anonymous) @ Row.js:14
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

JavaScript
 
Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}message: "Request failed with status code 404"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: '<!DOCTYPE html>n<html lang="en">n<head>n<meta char…not GET /trending/all/week</pre>n</body>n</html>n', status: 404, statusText: 'Not Found', headers: {…}, config: {…}, …}[[Prototype]]: Error
fetchData @ Row.js:13
await in fetchData (async)
(anonymous) @ Row.js:14
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
​
   
​

Answer

you created an axios instance but you did not use it

import instance from "the path to your axios.js file" //like "./axios"

JavaScript
 
import instance from "the path to your axios.js file" //like "./axios"
​

and in the fetchData

 async function fetchData() {
       const request = await instance.get(fetchUrl);
       console.log(request);
 }

JavaScript
 
 async function fetchData() {
       const request = await instance.get(fetchUrl);
       console.log(request);
 }
​

Advertisement

Answer