class SameHeight extends React.Component {
  constructor(props) {
    super(props);
    this.myRefs = [];
  }
  
  watchChildHeight() {
    let _ref = null;
    
    return (ref) => {
      if ((ref === null) && (_ref !== null)) {
        const idx = this.myRefs.indexOf(_ref);
        if (idx >= 0) {
          this.myRefs.splice(idx, 1);
        }        
      } else {
        _ref = ref;
        this.myRefs.push(ref);
      }
    }    
  }
  
  fixHeights() {
    let maxHeight = 0;

    $(this.myRefs).each(function(idx, el){

      if ($(el).height() > maxHeight) {
        maxHeight = $(el).height();
        console.log(maxHeight);
      }
    });

    $(this.myRefs).css('min-height', maxHeight);
  }
  
  render() {
    return React.Children.map(this.props.children, (child) => (
      React.cloneElement(
        child,
        {
          refMaker: this.watchChildHeight(),
          fixHeights: this.fixHeights.bind(this),
        },
      )
    ));
  }
}

class Box extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }
  
  setText(box, value) {
    this.setState(oldState => ({
      text: value,
    }));
  }
  
  componentDidUpdate() {
    this.props.fixHeights();
  }
  
  componentDidMount() {
    this.props.fixHeights();
  }    

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.text}
          onChange={(e) => this.setText('text', e.target.value)} 
          />
        <h1 ref={this.props.refMaker}>{this.state.text}</h1>
      </div>  
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <SameHeight>
          <Box />
          <Box />
          <Box />
          <Box />
        </SameHeight>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('main'));