{"id":6580,"date":"2026-11-02T06:30:39","date_gmt":"2026-11-02T09:30:39","guid":{"rendered":"https:\/\/tucumandevelopers.com\/index.php\/2026\/11\/02\/here-is-my-new-upcomming-project-movie-explorer\/"},"modified":"2026-11-02T06:30:39","modified_gmt":"2026-11-02T09:30:39","slug":"here-is-my-new-upcomming-project-movie-explorer","status":"publish","type":"post","link":"https:\/\/tucumandevelopers.com\/index.php\/2026\/11\/02\/here-is-my-new-upcomming-project-movie-explorer\/","title":{"rendered":"Here Is my New upcomming project Movie Explorer:"},"content":{"rendered":"
\n
<\/header>\n
\n

import { useState, useEffect } from “react”;
import axios from “axios”;
import “.\/Api_fetching.css”;<\/p>\n

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([]);<\/p>\n

\/\/ Integrated useEffect to load data automatically when the component mounts
useEffect(() => {
axios.get(“https:\/\/jsonfakery.com\/movies\/paginated”<\/a>)
.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<\/p>\n

return ( <\/p>\n

<\/p>\n

Movie Explorer<\/h2>\n
 <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} \u2605 <\/p> <\/div> <\/div> ))} <\/div> <\/div> <\/code><\/pre>\n
);
 }<\/p>\n
export default Api_fetching; <\/p>\n
 <\/code><\/pre>\n<\/p><\/div>\n<\/article>\n
  <\/div>\n
 <\/main> <\/div>\n<\/div>\n<\/div>\n<\/div>\n
Fuente: Art\u00edculo original<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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) […]<\/p>\n","protected":false},"author":1,"featured_media":6579,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"webixso_pending_account_ids":""},"categories":[41],"tags":[],"class_list":["post-6580","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devto"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts\/6580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/comments?post=6580"}],"version-history":[{"count":0,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts\/6580\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/media\/6579"}],"wp:attachment":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/media?parent=6580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/categories?post=6580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/tags?post=6580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}