I'm working on adding a filter to my movie list. My plan is to store all the movies in 'default' and then apply filters from there when needed. However, I encountered an error along the way:
Here's a snippet of my code:
const [movies, setMovies] = useState<string[]>([])
const [loading, setLoading] = useState(false)
const [defaultMovies, setDefaultMovies] = useState([])
useEffect(() => {
const fetchData = async() => {
setLoading(true)
await fetch("https://seleksi-sea-2023.vercel.app/api/movies")
.then(res => res.json())
.then(data => {
setMovies(data)
setDefaultMovies(data)
setLoading(false)
})
};
fetchData()
}, []);
const getCategory = async(category: string) => {
console.log(category)
if(category === 'Kids'){
const filteredMovies = defaultMovies.filter(data => data.age_rating <= 12)
setMovies(filteredMovies)
}
else if(category === 'Adults'){
const filteredMovies = defaultMovies.filter(data => data.age_rating > 12)
setMovies(filteredMovies)
}
}
I've been able to filter my movies successfully, but I'm open to any suggestions or advice for improving this approach.