[React Study] Movie List

import { useEffect, useState } from 'react';
import Card from 'react-bootstrap/Card';
import PropTypes from 'prop-types';
 
function Movie(props) {
  const movie = props.movie;
 
  return (
    <div>
      <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src={movie.medium_cover_image} />
        <Card.Body>
          <Card.Title>{movie.title}</Card.Title>
          <Card.Text>{movie.summary}</Card.Text>
        </Card.Body>
      </Card>
      <br />
    </div>
  );
}
 
Movie.prototype = {
  movie: PropTypes.object.isRequired,
};
 
function MovieList(props) {
  return (
    <div>
      {props.movies.map((movie, id) => (
        <Movie key={id} movie={movie} />
      ))}
    </div>
  );
}
 
MovieList.prototype = {
  movies: PropTypes.array.isRequired,
};
 
function CoinTracker() {
  const [isLoading, setIsLoading] = useState(true);
  const [movies, setMovies] = useState([]);
 
  const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`,
    );
    const json = await response.json();
 
    setMovies(json.data.movies);
    setIsLoading(false);
  };
 
  useEffect(() => {
    getMovies();
  }, [movies]);
 
  return (
    <div>
      <h1>Item List</h1>
      {isLoading ? <strong>Loading...</strong> : <MovieList movies={movies} />}
    </div>
  );
}
 
export default CoinTracker;