Movie Explorer using Axios fetching API:

import { useState } from "react";
import axios from "axios";
import "./Api_fetching.css";

function Api_fetching() {
const [product, setProduct] = useState([""]);
function fetchData(){
axios.get("https://jsonfakery.com/movies/paginated")
.then((res) => {
setProduct(res.data.data);
console.log(res);
});
}

return (

Movie Explorer

  <button onClick={fetchData}>Fetch Movies</button>

  <div className="movie-container">
    {product.map((s, index) => (
      <div className="movie-card" key={s.id || index}>
        <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;