Library.jsx

import React from 'react';
import axios from 'axios';
import spinner from '../assets/spinner.gif';

class Library extends React.Component {

    constructor(props) {
        super(props);
        this.state = { books: [], loading: false }
    }

    // COMPONENT LIFECYCLE HOOKS
    componentDidMount() {
        this.setState({loading: true}, () => {
            axios.get({})
                .then(res => this.setState({books: res.data.books, loading: false}))
                .catch(err => this.setState({loading: false}))
        });
    }

    render() {
        return (
            <ul className="books">
                { this.state.loading && (<img src={spinner} alt="loading..." />) }
                { this.state.books.map(book => (<li className="book">{book.title}</li>)) }
            </ul>
        );
    }
}

class ReduxLibrary extends React.Component {
    componentDidMount() { this.loadBooks(); }
    render() {
        return (
            <ul className="books">
                { this.props.loading && (<img src={spinner} alt="loading..." />) }
                { this.props.books.map(book => (<li className="book">{book.title}</li>)) }
            </ul>
        )
    }
}

export default Library;