fixed modal bug

src/components/MovieGenre.js

@@ -24,13 +24,13 @@ export default class MovieGenre extends Component {
 
       return (
          <>
-            <div onClick={() => this.handleToggleModal()}
+            <div onClick={() => this.props.selectMovieHandler(this.props.movie)}
                className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
                <img src={this.props.posterUrl} className="movieShowcase__container--movie-image" />
             </div>
-            <Modal show={this.state.toggleModal} movie={this.props.movie} modalClosed={this.closeModal}>
+            {/* <Modal show={this.state.toggleModal} movie={this.props.movie} modalClosed={this.closeModal}>
                <MovieDetails movie={this.props.movie} />
-            </Modal>
+            </Modal> */}
          </>
       )
    }

src/containers/DisplayMovieRow.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import OwlCarousel from 'react-owl-carousel2';
+
 import MovieGenre from '../components/MovieGenre';
 
-const getMovieRows = (movies, url) => {
+const getMovieRows = (movies, url, selectMovieHandler) => {
   const movieRow = movies.map((movie) => {
     let movieImageUrl =
       'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
@@ -15,6 +17,7 @@ const getMovieRows = (movies, url) => {
     if (movie.poster_path && movie.backdrop_path !== null) {
       const movieComponent = (
         <MovieGenre
+          selectMovieHandler={selectMovieHandler}
           key={movie.id}
           url={url}
           posterUrl={movieImageUrl}
@@ -29,7 +32,7 @@ const getMovieRows = (movies, url) => {
 };
 
 export default function DisplayMovieRow(props) {
-  let movies = getMovieRows(props.movies, props.url);
+  let movies = getMovieRows(props.movies, props.url, props.selectMovieHandler);
   return (
     <>
       <h1 className="movieShowcase__heading">{props.title}</h1>

src/containers/Home.js

@@ -17,28 +17,10 @@ class Home extends Component {
 
 
   /* Get the appropriate details for a specific movie that was clicked */
-  // selectMovieHandler = (movie) => {
-  //   this.setState({ toggleModal: true });
-
-  //   let url;
-  //   /** Make the appropriate API call to get the details for a single movie or tv show. */
-  //   if (movie.media_type === "movie") {
-  //     const movieId = movie.id;
-  //     url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.API_KEY}`;
-
-  //   } else if (movie.media_type === "tv") {
-  //     const tvId = movie.id
-  //     url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=${process.env.API_KEY}`;
-  //   }
-
-  //   axios.get(url)
-  //     .then(res => {
-  //       const movieData = res.data;
-  //       this.setState({ movieOverview: movieData });
-  //     }).catch(error => {
-  //       console.log(error);
-  //     });
-  // }
+  selectMovieHandler = async (movie) => {
+    this.setState({ toggleModal: true });
+    await this.setState({ movieOverview: movie });
+  }
 
   closeModal = () => {
     this.setState({ toggleModal: false });
@@ -48,7 +30,7 @@ class Home extends Component {
     return (
       <>
         <div className="main-content">
-          <MainContent />
+          <MainContent selectMovieHandler={this.selectMovieHandler} />
         </div>
         <Modal show={this.state.toggleModal}
           modalClosed={this.closeModal}

src/containers/MainContent.js

@@ -124,6 +124,7 @@ class MainContent extends Component {
               if (info.movies.length > 0) {
                 return (
                   <DisplayMovieRow
+                    selectMovieHandler={this.props.selectMovieHandler}
                     key={info.title}
                     title={info.title}
                     url={info.url}