class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      box1: '', box2: '', box3: '', box4: '',
    }
  }
  
  setText(box, value) {
    this.setState(oldState => ({
      [box]: value,
    }));
  }
  
  fixHeights() {
    let maxHeight = 0;
    
    $("h1").each(function(){
      console.log($(this).height());
      if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
        console.log(maxHeight);
      }
    });

    $("h1").css('min-height', maxHeight);
  }
  
  componentDidUpdate() {
    this.fixHeights();
  }
  
  componentDidMount() {
    this.fixHeights();
  }
  
  render() {
    return (
      <div className='container'>
        <div>
          <input
            type="text"
            value={this.state.box1}
            onChange={(e) => this.setText('box1', e.target.value)} 
            />
          <h1>{this.state.box1}</h1>
        </div>
        <div>
          <input
            type="text"
            value={this.state.box2}
            onChange={(e) => this.setText('box2', e.target.value)} 
            />
          <h1>{this.state.box2}</h1>
        </div>
        <div>
          <input
            type="text"
            value={this.state.box3}
            onChange={(e) => this.setText('box3', e.target.value)} 
            />
          <h1>{this.state.box3}</h1>
        </div>
        <div>
          <input
            type="text"
            value={this.state.box4}
            onChange={(e) => this.setText('box4', e.target.value)} 
            />
          <h1>{this.state.box4}</h1>
        </div>      
      </div>

    );
  }
}

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