Function-as-child Modals

modal.js

class Modal extends Component {
  constructor() {
    super();
    this.state = { showing: true };
    this.close = this.close.bind(this);
  }
  close() {
    this.setState({ showing: false });
  }
  render() {
    if(!this.state.showing) {
      return null;
    }
    
    // pass methods to let props deal with
    const content = this.props.children(this.close);
    
    return (
      <div className='overlay'>
        <div className='modal'>
          <a onClick={this.close}>X</a>
          {content}
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Modal>
    {(close) =>
      <a onClick={close}>Clicking me will close the modal</a>
    }
  </Modal>,
  document.getElementById('root')
);