реагирование компонента реагирования - изменение состояния при изменении размера основного элемента рендеринга

Question

Получен компонентact.js, который отображает 3 кнопки, которые выровнены по горизонтали на панели приложений.

Метки меню сокращаются при изменении состояния, однако, как я могу изменить эти состояния, когда размер родительского элемента div равенизменения, непосредственно перед тем, как дочерние элементы (кнопки) начнут выравниваться по вертикали (накладываются друг на друга, а не по горизонтали)?Так что, в основном, речь идет о том, чтобы поймать событие, когда основной элемент не достаточно широк для выравнивания кнопок по горизонтали.

Как правильно выполнить то, что я намерен сделать?

return(
    <div>
        <Button color="inherit" variant={this.state.btnVar0} onClick={(e) => this.toggleMenuBtns(0,e)}><span className = {classes.menuButtonMed}  >M{this.state.squeeze > 1 ? null : <span  >ed</span>}</span>{this.state.squeeze > 0 ? null : <span>icine</   span>}</Button>
        <Button color="inherit" variant={this.state.btnVar1} onClick={(e) => this.toggleMenuBtns(1,e)}><span className = {classes.menuButtonTreat}>D{this.state.squeeze > 1 ? null : <span>ia</span>}</span>{this.state.squeeze > 0 ? null : <span>gnose</span>}</Button>
        <Button color="inherit" variant={this.state.btnVar2} onClick={(e) => this.toggleMenuBtns(2,e)}><span className = {classes.menuButtonCom}  >W{this.state.squeeze > 1 ? null : <span  >ell</span>}</span>{this.state.squeeze > 0 ? null : <span>ness</span>}</Button>
    </div>
);