When using array map
method, the browser page is blank and in the console I receive an error:
array.map not a function
Although when I comment array.
map before rendering the page and after page gets renderd I uncomment it and it works fine.
const movieDesc = useSelector((state) => state.movieDesc);
const [allVideo, setallVideo] = useState("");
const getAllVido = async () => {
try {
const res = await axios.get(
`https://api.themoviedb.org/3/${movieDesc.desc.media_type}/${movieDesc.desc.id}/videos?api_key=${process.env.REACT_APP_API_KEY}`
);
console.log(res.data);
setallVideo(res.data.results);
} catch {
console.log(Error);
}
};
useEffect(() => {
getAllVido();
}, []);
JSX code:
<p className="movieDesc__trailer">All Video</p>
{allVideo?.map((video) => (
<>
<p key={video.id}>{video.name}</p>
<iframe
key={video.id}
className="movieDesc__trailerVideo"
src={`https://www.youtube.com/embed/${video.key}`}
title={video.name}
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</>
))}
<p className="movieDesc__wrap">Wrapping Up</p>