I am a beginner. I have such a fetch
const getMovieByDecade = (decade) => {
return api.get(`movie/years/${decade}`)
}
API for ${decade} ex.1920 :
"id": "aebfdffa-748d-4e33-bf2c-da353b185aac",
"title": "Some Movie ",
"year": 1925,
How can I download and return movies from this Api sequentially by decade using React Hooks (useState, UseEffetct) ?
export const YearOfProduction = () => {
return (
<HomeWrapper>
<BackButton />
<YearOfProductionHeader>
<h1>Year YearOfProduction</h1>
<img className="clock" src="/images/clock.png"></img>
</YearOfProductionHeader>
<YearsOfProductionWrapper>
<div className="XIXcentury">
<span className="century">XIX</span>
<Years>'90</Years>
</div>
<div class="XXcentury">
<span className="century">XX</span>
<div className="ten_years">
<Years >'00</Years>
<Years>'10</Years>
<Years>'20</Years>
<Years>'30</Years>
<Years>'40</Years>
</div>
<div className="ten_years">
<Years>'50</Years>
<Years>'60</Years>
<Years>'70</Years>
<Years>'80</Years>
<Years>'90</Years>
</div>
</div>
</YearsOfProductionWrapper>
// here I is place for movie list after decades after Click Years
</HomeWrapper>
)
}
Supposing that you have a form or selector, where the user selects a decade and you fetch movies for the decade, this should work :
const [decade, setDecade] = useState(1990)
const [movies, setMovies] = useState({})
useEffect(() => {
const getData = async() => {
await getMovieByDecade(decade);
setMovies(movies)
}
getData()
}, [decade])