React Image Error handle

Starting point for creating JSFiddles with React. This uses React with Addons.

by Roger Ramos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Image = React.createClass({
	errorHandle: function(event) {
  	event.target.src = "https://cdn4.iconfinder.com/data/icons/allicons-basic/512/broken_link-16.png"
  },
  render: function() {
    return (
    	<img onError={this.errorHandle} src={this.props.src} title={this.props.title} />
    );
  }
});

var Hello = React.createClass({
	getInitialState: function() {
  	return {
    	imageError: null,
      imageSrc: "http://www.google.com.br/image.jpg"
    }
  },
  handleChange: function(event) {
  	this.setState({imageSrc: event.target.value});
  },
  render: function() {
    return (
    	<div>
      	<input onChange={this.handleChange} type="text" value={this.state.imageSrc} /><br />
        <small 
        	style={{
              display: "block", 
              whiteSpace: "nowrap", 
              maxWidth: "100%", 
              overflow: "hidden", 
              textOverflow: "ellipsis"
            }}>Hello {this.state.imageSrc}</small><br />
        <Image src={this.state.imageSrc} title={this.state.imageSrc} />
        <Image src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/3-16.png" />
        <Image src="https://cdn0.iconfinder.com/data/icons/social-network-9/50/4-16.png" />
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);