Handle missing movie posters

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

@@ -32,17 +32,32 @@ 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);
-  const imgClass = 'thumbnail' + selected;
+    this.state = {
-  return (
+      src: `/img/movies/${this.props.data.imdb_id}.jpg`,
-    <div className="col-xs-12 col-md-3">
+    }
-      <a className={imgClass}>
+    this.handleError = this.handleError.bind(this);
-        <img src={imgUrl} onClick={props.onClick}/>
+  }
-      </a>
+  handleError() {
-    </div>
+    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={this.state.src}
+            onClick={this.props.onClick}
+            onError={this.handleError}
+          />
+        </a>
+      </div>
+    );
+  }
 }
 
 function MovieDetails(props) {