I am trying to fetch movie by genres from movie database - reactjs

Question

I am struggling to fetch movies by its genres from API movies database. The error is always say that 'genres.map is not a function' or when I try to call selectedGenre to fetch the movie that associate with each genres by using document.GetElementById.value, it cannot read the .value thing. What I am doing wrong? Thank you ahead
const Discover = () => {
const navigate = useNavigate();
const [movies, setMovies] = useState([]);
const [genres, setGenres] = useState('');
const [searchTerm, setSearchTerm] = useState('');
const currentGenre = document.getElementById('genres').value;
const FEATURED_API = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=9a7243213d79e4344f8f16ce3b6098cf`;
const GENRES_API = 'https://api.themoviedb.org/3/genre/movie/list?api_key=9a7243213d79e4344f8f16ce3b6098cf';
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=9a7243213d79e4344f8f16ce3b6098cf&query='
useEffect(() => {
getMovies(FEATURED_API),
getGenres(GENRES_API)
}, []);
const getGenres = (API) => {
fetch(API)
.then(res => res.json())
.then((data) => {
setGenres(data.genres);
console.log(data.genres)
})
}
const getMovies = (API) => {
fetch(API)
.then((res) => res.json())
.then((data) => {
setMovies(data.results);
console.log(data.results);
});
};
const handleOnSubmit = (e) => {
e.preventDefault();
if(currentGenre) {
fetch(FEATURED_API + `&with_genres=${currentGenre}`)
.then((res) => res.json())
.then((data) => {
setMovies(data.results)
console.log(data.results)
})
}
setGenres('')
// navigate(`/genre/movie/list/${genres.name}`)
}
const handleOnChange = (e) => {
// if(
// genres.id === movies.genres_ids
// )
setGenres(e.target.value)
}
// if(isFetching) return <Loader type='Loading films...'/>;
// if (error) return <Error />;
return (
<div className='flex flex-col'>.
<div className='w-full flex justify-between items-center sm:flex-row flex-col mt-4 mb-10'>.
<form onSubmit={handleOnSubmit}\>
<h2 className='font-bold text-3xl text-black text-left ml-4'>Discover</h2>
<select
value={currentGenre}
onChange={handleOnChange}
className='mt-4 ml-3'id='genres'\>
{genres.length > 0 &&genres.map((genre, i) => <option key={i} value={genres}>{genre.name}</option>)}
</select>
</form>
</div>
<div className='flex flex-wrap sm:justify-start justify-center gap-8'>
{movies.length > 0 &&
movies.map((movie) => <FilmCard key={movie.id} {...movie} />)}
</div>
</div>
)}
export default Discover

Answer 1

I would start by structuring the data fetch differently, something more compact..
Like:
export const useData = (url) => {
const [state, setState] = useState();
useEffect(() => {
const dataFetch = async () => {
const data = await (await fetch(url)).json();
setState(data);
};
dataFetch();
}, [url]);
return { data: state };
};
Maybe error handling too, like:
function App() {
const [state, setState] = useState([])
const [hasError, setHasError] = useState(false)
const {loading, setLoading} = useState(false)
useEffect(() => {
setLoading(true)
fetch("/api/data").then(
res => {
setState(res.data);
setLoading(false)}
).catch(err => {
setHasError(true))
setLoading(false)})
}, [])
return (
<>
{
loading ? <div>Loading...</div> : hasError ? <div>Error occured.</div> : (state.map( d => <div>{d}</div>))
}
</>
)
}
I hope it helps you ,
Cheers!