MovieCard.js file contains the card component of movie. Project Completed.

Author: varunjha290119

src/MovieCard.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function MovieCard({movie}) {
+    return(
+        <div className="card">
+            <img className="card--image" alt={movie.title + "Poster"}
+                 src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${movie.poster_path}`}
+            />
+
+            <div className="card--content">
+                <h3 className="card--title">{movie.title}</h3>
+                <p><small>RELEASE DATE: {movie.release_date}</small></p>
+                <p><small>RATING: {movie.vote_average}</small></p>
+                <p className="card--desc">{movie.overview}</p>
+            </div>
+        </div>
+    )
+}

src/SearchMovie.js

@@ -1,4 +1,5 @@
 import React, {useState} from "react";
+import MovieCard from "./MovieCard";
 
 export default function SearchMovies(){
 
@@ -39,18 +40,7 @@ export default function SearchMovies(){
             </form>
             <div className="card-list">
                 {movies.filter(movie => movie.poster_path).map(movie => (
-                    <div className="card" key={movie.id}>
-                        <img className="card--image" alt={movie.title + "Poster"}
-                             src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${movie.poster_path}`}
-                        />
-
-                        <div className="card--content">
-                            <h3 className="card--title">{movie.title}</h3>
-                            <p><small>RELEASE DATE: {movie.release_date}</small></p>
-                            <p><small>RATING: {movie.vote_average}</small></p>
-                            <p className="card--desc">{movie.overview}</p>
-                        </div>
-                    </div>
+                    <MovieCard movie={movie} key={movie.id}/>
                 ))}
             </div>
         </>