Horse Donkey Heart

app.js

const Image = (props) => {
	return (
  	<div style={{width: '150px', margin: '1em'}}>
    	<img src={props.imageUrl} style={{width: "20em", height: "13em"}} placeholder={props.name} />
      <div style={{display: 'inline-block', marginLeft: 10}}>
      	<div style={{fontSize: '1.25em', fontWeight: 'bold'}}>{props.name}</div>
      </div>
  	</div>
  );
};

const Images = (props) => {
	return (
  	<div>
    	{props.images.map( image => image.showImage ? <Image {...image} /> : null )}
    </div>
  );
};

const Button = (props) => {
	return (
  	<div style={{display: 'inline-block', marginLeft: 5}}>
  		<button className="btn" onClick={() => props.toggleImage(props.name)}>{props.name}</button>
  	</div>
  )
};

const Buttons = (props) => {
	return (
  	<div>
    	<h3>Show/Hide Images</h3>
      {props.images.map(image => <Button name={image.name} toggleImage={props.toggleImage} />)}
    </div>
  );
};

class App extends React.Component {
	state = {
  	images: [
    	{name: "Horse", 
      imageUrl: "http://buzzsharer.com/wp-content/uploads/2015/06/beautiful-running-horse.jpg",
      showImage: true},
    	{name: "Donkey",
      imageUrl: "http://images.all-free-download.com/images/graphiclarge/donkey_animal_farm_216311.jpg",
      showImage: true}, 
      {name: "Heart",
      imageUrl: "http://cdn.tinybuddha.com/wp-content/uploads/2015/02/Light-in-Heart.png",
      showImage: true}],
	};
  
  toggleImage = (imageName) => {
  	const image = this.state.images.filter(image => {
    	return image['name'] === imageName;
    })[0];
    image['showImage'] = !image['showImage'];
    var index = this.state.images.indexOf(image);
    this.state.images[index] = image;
    this.forceUpdate();
  };
  
	render() {
    return (
  	<div>
    	<h1>Horse, Donkey, Heart</h1>
    	<Buttons images={this.state.images} toggleImage={this.toggleImage} />
      <Images images={this.state.images} />
    </div>
  );
  }
}

ReactDOM.render(<App />, mountNode);