Handle missing movie posters

src/public/js/components/movies/list.js

@@ -32,18 +32,33 @@ function MoviePosters(props) {
   );
 }
 
-function MoviePoster(props) {
+class MoviePoster extends React.Component {
-  const imgUrl = '/img/movies/' + props.data.imdb_id +'.jpg';
+  constructor(props) {
-  const selected = props.selected ? ' thumbnail-selected' : '';
+    super(props);
+    this.state = {
+      src: `/img/movies/${this.props.data.imdb_id}.jpg`,
+    }
+    this.handleError = this.handleError.bind(this);
+  }
+  handleError() {
+    this.setState({ src: '/img/noimage.png' });
+  }
+  render() {
+    const selected = this.props.selected ? ' thumbnail-selected' : '';
     const imgClass = 'thumbnail' + selected;
     return (
       <div className="col-xs-12 col-md-3">
         <a className={imgClass}>
-        <img src={imgUrl} onClick={props.onClick}/>
+          <img
+            src={this.state.src}
+            onClick={this.props.onClick}
+            onError={this.handleError}
+          />
         </a>
       </div>
     );
   }
+}
 
 function MovieDetails(props) {
   return (