React: NetworkError when attempting to fetch resource from MovieDB API - reactjs

Question

I am needing to fetch data from the MovieDB API and I have my code setup to where I just want to return some data after I hit the search button. But when I hit the search button I get back NetworkError when attempting to fetch resource
My code so far consists of this
import React, {useEffect, useState} from 'react';
import './App.css';
const App = () => {
const API_KEY = '664e565dee7eaa6ef924c41133a22b63';
const [movies, setMovies] = useState([]);
const [query, setQuery] = useState("");
useEffect(() => {
async function getMovies(){
const response = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=en-US&query=${query}`)
const data = await response.json()
console.log(data.results)
setMovies(data.results)
}
if(query !== "") getMovies();
}, [query])
return (
<div>
<form>
<button onClick={() => setQuery("Avengers")}type="submit">Search</button>
<p>{JSON.stringify(movies)}</p>
</form>
</div>
);
}
export default App;

Answer 1

If use (and query ='Avengers'):
${query}`
in API URL, you get this (Every record is corelated with Avengers movie)
Try this - It's not include more advanced functions, which you need.
But it's good fundamental for bulding next features:
import React, { useEffect, useState } from 'react';
const App2 = () => {
const API_KEY = '664e565dee7eaa6ef924c41133a22b63';
const [movies, setMovies] = useState([]);
const [query, setQuery] = useState('Avengers');
useEffect(() => {
async function getMovies(query) {
await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=en-US&query=$query`)
.then(data => data.json())
.then(data => {
console.log(data.results)
const result = data.results.map(obj => ({ popularity: obj.popularity, id: obj.id }));
console.log(result)
setMovies(result)
console.log(movies)
})
}
getMovies()
}, [query])
return (
<div>
{movies.map((movie, key) => (
<div key={key}>
<h1> {movie.popularity}</h1>
<h1>{movie.id}</h1>
</div>
))}
</div>
);
}
export default App2;
Here is your schema from API (only 1 object in array) (I used only id & popularity) - it's possible to use what you wish: