title: react.js Replace img src onerror
body: <p>I have a react component that is the detail view from a list.</p>
  
  <p>I am trying to replace the image with a default image if the image does not exist and there is a 404 error.  </p>
  
  <p>I would normally use the onerror method in the img tag but that doesn't seem to be working.</p>
  
  <p>I am not sure how to do this with react.</p>
  
  <p>Here is my component:</p>
  
  <pre><code>import React from 'react';
  import {Link} from 'react-router';
  import ContactStore from '../stores/ContactStore'
  import ContactActions from '../actions/ContactActions';
  
  class Contact extends React.Component {
    constructor(props) {
      super(props);
      this.state = ContactStore.getState();
      this.onChange = this.onChange.bind(this); 
   }
  
  componentDidMount() {
    ContactStore.listen(this.onChange);
    ContactActions.getContact(this.props.params.id);
  }
  
  componentWillUnmount() {
    ContactStore.unlisten(this.onChange);
  }
  
  componentDidUpdate(prevProps) {
    if (prevProps.params.id !== this.props.params.id) {
      ContactActions.getContact(this.props.params.id);
    }
  }
  
  onChange(state) {
    this.setState(state);
  }
  
  render() {
    return (
      &lt;div className='container'&gt;
        &lt;div className='list-group'&gt;
          &lt;div className='list-group-item animated fadeIn'&gt;
            &lt;h4&gt;{this.state.contact.displayname}&lt;/h4&gt;
            &lt;img src={this.state.imageUrl} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  }
  
  export default Contact;
  </code></pre>