Here Is my New upcomming project Movie Explorer:

import { useState, useEffect } from “react”;
import axios from “axios”;
import “./Api_fetching.css”;

function Api_fetching() {
// FIXED: Initialize with an empty array so .map() doesn’t break or render an empty card on load
const [product, setProduct] = useState([]);

// Integrated useEffect to load data automatically when the component mounts
useEffect(() => {
axios.get(“https://jsonfakery.com/movies/paginated”)
.then((res) => {
// Safe access: uses optional chaining and fallback to prevent empty array crashes
setProduct(res.data?.data || []);
console.log(res);
})
.catch((err) => console.error(“Error fetching movies:”, err));
}, []); // Empty dependency array ensures this runs exactly once on page load

return (

Movie Explorer

 <div className="movie-container"> {product.map((s) => ( <div className="movie-card" key={s.id}> <img src={s.poster_path} alt={s.original_title} className="movie-image" /> <div className="movie-details"> <h2>{s.original_title}</h2> <p> <b>Overview:</b> {s.overview} </p> <p> <b>Release Date:</b> {s.release_date} </p> <p> <b>Rating:</b> {s.vote_average} ★ </p> </div> </div> ))} </div> </div> 

);
}

export default Api_fetching;