App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

img{
  display: block;
  border-radius: 8px;
  max-width: 90%;
  height: 45vh;
  margin: 30px auto;
}

img.thumbnail{
  display: inline;
  border-radius: 8px;
  max-width: 30%;
  height: 10vh;
  margin: 10px auto;
  padding: 5px;
}

h2{
  text-align: center;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

App.js

import React, { Component } from 'react';
import Header from './Header';
import Image from './Image';
import axios from 'axios';
import ImageView from './ImageView';

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      image: null,
      loading:false,
      imageStore: []
    };

    this.getImage = this.getImage.bind(this); 
    this.getThumbnail = this.getThumbnail.bind(this);
  }

  
  componentWillMount() {
    this.getImage();
  }
  
  getImage(){
    this.setState({loading:true});
    axios.get("http://www.splashbase.co/api/v1/images/random").then((response) => {
      console.log(response);

      let item = this.state.imageStore;
	    item.push(response.data.url);
    
      this.setState({
        image:response.data.url,
        loading:false,
        imageStore: item
      });
    });
  }

  getThumbnail(el){
    this.setState({image:el.target.dataset.type});
  }

  render() {
    return (
      <div>
        <Header getImage={this.getImage} />
        <Image loading={this.state.loading} thumbnail={this.state.imageStore} 
        getThumbnail={this.getThumbnail} />
        <ImageView imageUrl={this.state.image} />
      </div>
    );
  }
}

export default App;

Header.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

const Header = (props) => {
    return (
        <div className="App">
        <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div className="App-title">
            <button onClick= {props.getImage}>Load Image</button>
        </div>
        </header>
    </div>
    );    
};

export default Header;

Image.js

import React from 'react';
const Image = (props) => {
    if(props.loading){
        return (<h2>Loading</h2>);
    }
    else{
        return (
            <div>
                {
                    props.thumbnail.map((thumb, id) => <img id="img_thumb" onClick={props.getThumbnail} className="thumbnail" key={id} src={thumb} data-type={thumb} alt={thumb} />)
                }
                
            </div>
        );
    }
    
};

export default Image;

ImageView.js

import React from 'react';


const ImageView = (props) => {
    return (
        <div>
        <img src={props.imageUrl} alt={props.imageUrl} />
        </div>
    );
    
};

export default ImageView;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

When you click on the thumbnail images is loads the main image