An example of the evolution of a component

separationOfConcerns.js

/* Start with building the component */
import React from 'react';

class Value extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: false };
    this.onToggle = this.onToggle.bind(this);
  }
  
  render() {
    return (
      <div>
        <p onClick={this.onToggle}>Title</p>
        { this.state.isActive && <p>Content</p> }
      </div>
    );
  }
  
  onToggle() {
    this.setState({ isActive: !this.state.isActive });
  }
}

export default Value;

/*
 * Presentational Component
 */
const Value = ({ isActive, onToggle }) => (
    <div>
        <p onClick={onToggle}>Title</p>
        { isActive && <p>Content</p> }
    </div>
);

/*
 * Container Level Component
 */
class ValueContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: false };
    this.onToggle = this.onToggle.bind(this);
  }

  render() {
    return <Value isActive={this.state.isActive} onToggle={this.onToggle} />;
  }

  onToggle() {
    this.setState({ isActive: !this.state.isActive });
  }
}

/*
 * Abstract common functionality with HOC
 */ 
const Value = ({ isActive, onToggle }) => (
    <div>
        <p onClick={onToggle}>Title</p>
        { isActive && <p>Content</p> }
    </div>
);

const toggle = ComposedComponent => class extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: false };
    this.onToggle = this.onToggle.bind(this);
  }

  render() {
    return <ComposedComponent
                   isActive={this.state.isActive}
                   onToggle={this.onToggle}
                   {...this.props} />;
  }

  onToggle() {
    this.setState({ isActive: !this.state.isActive });
  }
};

const toggledValue = toggle(Value);

/*
 * Abstract common functionality with Facc
 */
const Value = ({ isActive, onToggle }) => (
    <div>
        <p onClick={onToggle}>Title</p>
        { isActive && <p>Content</p> }
    </div>
);

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isActive: false };
    this.onToggle = this.onToggle.bind(this);
  }
  render() {
    return (
        this.props.children(this.state.isActive, this.onToggle)
    );
  }
  onToggle() {
    this.setState({ isActive: !this.state.isActive });
  }
}

const Consumer = props => (
   <Toggle>
      { (isActive, onToggle) => <Value isActive={isActive} onToggle={onToggle} /> }
   </Toggle>
);