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>
)
}
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;
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
you created an axios instance but you did not use it
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);
}