diff --git a/src/components/MovieItem.jsx b/src/components/MovieItem.jsx
index 1d2804e..0f102e9 100644
--- a/src/components/MovieItem.jsx
+++ b/src/components/MovieItem.jsx
@@ -1,70 +1,60 @@
-import React from "react";
+import React from 'react'
 
-class MovieItem extends React.Component {
-  state = {
-    willWatch: false
-  };
 
-  render() {
-    const {
-      data,
-      deleteMovie,
-      addMovieToWillWatch,
-      deleteMovieFromWillWatch
-    } = this.props;
-    // props.data = {};
-    return (
-      <div className="card">
-        <img
-          className="card-img-top"
-          src={`https://image.tmdb.org/t/p/w500${data.backdrop_path ||
-            data.poster_path}`}
-          alt=""
-        />
-        <div className="card-body">
-          <h6 className="card-title">{data.title}</h6>
-          <div className="d-flex justify-content-between align-items-center">
-            <p className="mb-0">Rating: {data.vote_average}</p>
-            {this.state.willWatch ? (
-              <button
-                type="button"
-                className="btn btn-success"
-                onClick={() => {
-                  this.setState({
-                    willWatch: false
-                  });
-                  deleteMovieFromWillWatch(data);
-                }}
-              >
-                Will Watch
-              </button>
-            ) : (
-                <button
-                  type="button"
-                  className="btn btn-secondary"
-                  onClick={() => {
-                    this.setState({
-                      willWatch: true
-                    });
-                    addMovieToWillWatch(data);
-                  }}
-                >
-                  Will Watch
-              </button>
-              )}
-          </div>
-          <button
-            type="button"
-            onClick={() => {
-              deleteMovie(data);
-            }}
-          >
-            Delete
-          </button>
-        </div>
-      </div>
-    );
-  }
+class MovieItem extends React.PureComponent {
+    constructor() {
+        super()
+
+        this.state = {
+            willWatch: false
+        }
+    
+    }
+
+    addWillWatch = movie => {
+        this.setState({
+            willWatch: true
+        });
+        this.props.addMovieToWillWatchList(movie)
+    }
+
+    removeWillWatch = movie => {
+        this.setState({
+            willWatch: false
+        });
+        this.props.removeMovieFromWillWatch(movie)
+    }
+
+    render() {
+        const { movie, removeMovie, addMovieToWillWatchList, removeMovieFromWillWatch } = this.props
+        return (
+            <div className="card">
+                <img
+                    className="card-img-top"
+                    src={`https://image.tmdb.org/t/p/w500${movie.backdrop_path ||
+                        movie.poster_path}`}
+                    alt=""
+                />
+                <div className="card-body">
+                    <h6 className="card-title">{movie.title}</h6>
+                    <div className="d-flex justify-content-between align-items-center">
+                        <p className="mb-0">Rating: {movie.vote_average}</p>
+                        {this.state.willWatch ?
+                            <button type="button" className="btn btn-success" onClick={this.removeWillWatch.bind(this, movie)}>
+                                Remove 'Will Watch'
+                            </button> : <button type="button" className="btn btn-secondary" onClick={this.addWillWatch.bind(this, movie)}>
+                                Add 'Will Watch'
+                             </button>
+                        }
+
+                    </div>
+                    <button type="button" onClick={removeMovie.bind(this, movie)}>Delete Movie</button>
+                </div>
+            </div>
+        )
+    }
 }
 
-export default MovieItem;
+
+
+export default MovieItem