set prettier rules

.prettierrc

@@ -1,3 +1,5 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false
 }

src/containers/Home.js

@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 
-import MainContent from './MainContent';
-import Modal from '../components/UI/Modal';
-import MovieDetails from '../components/Movie/MovieDetails';
+import MainContent from './MainContent'
+import Modal from '../components/UI/Modal'
+import MovieDetails from '../components/Movie/MovieDetails'
 
 class Home extends Component {
   state = {
@@ -10,22 +10,22 @@ class Home extends Component {
     toggleModal: false,
     /** Holds the movie information for a single movie. */
     movieOverview: {},
-  };
+  }
 
   /* Get the appropriate details for a specific movie that was clicked */
   selectMovieHandler = async (movie) => {
-    this.setState({ toggleModal: true });
-    await this.setState({ movieOverview: movie });
-  };
+    this.setState({ toggleModal: true })
+    await this.setState({ movieOverview: movie })
+  }
 
   closeModal = () => {
-    this.setState({ toggleModal: false });
-  };
+    this.setState({ toggleModal: false })
+  }
 
   render() {
     return (
       <>
-        <div className="main-content">
+        <div className='main-content'>
           <MainContent selectMovieHandler={this.selectMovieHandler} />
         </div>
         <Modal
@@ -36,8 +36,8 @@ class Home extends Component {
           <MovieDetails movie={this.state.movieOverview} />
         </Modal>
       </>
-    );
+    )
   }
 }
 
-export default Home;
+export default Home