Done

src/components/LatestMovieReviewsContainer.js

@@ -1,9 +1,36 @@
 import React, { Component } from 'react';
 import 'isomorphic-fetch';
-import MovieReviews from './MovieReviews'
 
-const NYT_API_KEY = 'dGpQ5OmGP2SgfvZimlpCUoF4iOag9qzZ';
+import MovieReviews from './MovieReviews';
+
+const NYT_API_KEY = 'f98593a095b44546bf4073744b540da0';
 const URL = 'https://api.nytimes.com/svc/movies/v2/reviews/all.json?'
             + `api-key=${NYT_API_KEY}`;
 
-// Code LatestMovieReviewsContainer Here
+class LatestMovieReviewsContainer extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      reviews: []
+    };
+  }
+
+  componentDidMount() {
+    fetch(URL)
+      .then(res => res.json())
+      .then(response => this.setState({ reviews: response.results }));
+  }
+
+  render() {
+    return (
+      <div className="latest-movie-reviews">
+        <h2>The Latest Reviews:</h2>
+        <MovieReviews reviews={this.state.reviews} />
+      </div>
+    );
+  }
+}
+
+
+export default LatestMovieReviewsContainer;

src/components/MovieReviews.js

@@ -1 +1,36 @@
-// Code MovieReviews Here
+import React from 'react';
+
+const Review = ({
+  headline,
+  byline,
+  link,
+  summary_short
+}) => {
+  return (
+
+    <div
+      key={headline}
+      className="review"
+    >
+      <header>
+        <a
+          className="review-link"
+          href={link.url}
+        >
+          {headline}
+        </a>
+        <br/>
+        <span className="author">{byline}</span>
+      </header>
+      <blockquote>{summary_short}</blockquote>
+    </div>
+  );
+};
+
+const MovieReviews = ({ reviews }) => <div className="review-list">{reviews.map(Review)}</div>;
+
+MovieReviews.defaultProps = {
+  reviews: []
+};
+
+export default MovieReviews;

src/components/SearchableMovieReviewsContainer.js

@@ -1,9 +1,49 @@
 import React, { Component } from 'react';
 import 'isomorphic-fetch';
-import MovieReviews from './MovieReviews'
 
-const NYT_API_KEY = 'dGpQ5OmGP2SgfvZimlpCUoF4iOag9qzZ';
-const URL = 'https://api.nytimes.com/svc/movies/v2/reviews/search.json?'
-            + `api-key=${NYT_API_KEY}`;
+import MovieReviews from './MovieReviews';
 
-// Code SearchableMovieReviewsContainer Here
+const NYT_API_KEY = 'f98593a095b44546bf4073744b540da0';
+const BASE_URL =
+  'https://api.nytimes.com/svc/movies/v2/reviews/search.json?' +
+  `api-key=${NYT_API_KEY}&query=`;
+
+class SearchableMovieReviewsContainer extends Component {
+  state = {
+    searchTerm: '',
+    reviews: []
+  };
+
+  handleSearchInputChange = event =>
+    this.setState({ searchTerm: event.target.value });
+
+  handleSubmit = event => {
+    event.preventDefault();
+
+    fetch(BASE_URL.concat(this.state.searchTerm))
+      .then(res => res.json())
+      .then(res => this.setState({ reviews: res.results }));
+  };
+
+  render() {
+    return (
+      <div className="searchable-movie-reviews">
+        <form onSubmit={this.handleSubmit}>
+          <label htmlFor="search-input">Search Movie Reviews</label>
+          <input
+            id="search-input"
+            type="text"
+            style={{ width: 300 }}
+            onChange={this.handleSearchInputChange}
+          />
+          <button type="submit">Submit</button>
+        </form>
+        {typeof this.state.reviews === 'object' &&
+          this.state.reviews.length > 0 && <h2>Movie Review By Search:</h2>}
+        <MovieReviews reviews={this.state.reviews} />
+      </div>
+    );
+  }
+}
+
+export default SearchableMovieReviewsContainer;