LoadMore.js

// Description:
//  This simple component is from a production code I'm currently working on. 
// 	It is for triggering the loading of more contents from the server.
//  Once the data arive from server, hand it over to the parent component that needs the data
//
// Note: This gits doesn't use the functional setState pattern, for the sake of brevity.

import React, { Component } from "react";

class LoadMore extends Component {
	state = {
		isLoading: false
	};

	handleLoadMore = () => {
		const { URL, AccessToken } = this.props;
		fetchData(URL, AccessToken, this.handleLoadMoreComplete);
		this.setState(() => ({ isLoading: true }));
	};

	handleLoadMoreComplete = data => {
		this.props.onLoadMoreComplete(data);
		this.setState(() => ({ isLoading: false }));
	};

	render() {
		const { className, text } = this.props;
		const { isLoading } = this.state;
		return (
			<div
				onClick={!isLoading && this.handleLoadMore}
				className={`text-center ${className ? className : ""}`}
			>
				<span
					className={`btn dark nripple-wrapper ${isLoading ? "btnloading" : ""}`}
				>
					<div className="nripple">
						<span className="nripple__circle" />
					</div>
					{text}
				</span>
			</div>
		);
	}
}


//================================================================

// So I could have splited this component into Presentational/Container Components like this:

// LoadMoreContainer.js
// import the presentational component
import LoadMore from "./LoadMore";

class LoadMoreContainer extends Component {
	state = {
		isLoading: false
	};

	handleLoadMore = () => {
		const { URL, AccessToken } = this.props;
		fetchData(URL, AccessToken, this.handleLoadMoreComplete);
		this.setState(() => ({ isLoading: true }));
	};

	handleLoadMoreComplete = data => {
		this.props.onLoadMoreComplete(data);
		this.setState(() => ({ isLoading: false }));
	};

 // render the presentational component
	render() {
		return (
			<LoadMore onLoadMore={this.handleLoadMore" isLoading={this.state.isLoading}/>
		);
	}
}

//=======================================================================

// LoadMore.js File
const LoadMore = (onLoadMore, isLoading, text) => (
	<div
		onClick={!isLoading && this.handleLoadMore}
		className={`text-center ${className ? className : ""}`}
	>
		<span
			className={`btn dark nripple-wrapper ${isLoading ? "btnloading" : ""}`}
		>
			<div className="nripple">
				<span className="nripple__circle" />
			</div>
			{text}
		</span>
	</div>
);

export default LoadMore;