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;

/*
 * 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>
);