I am working with a react component that displays a div containing menu items which are aligned horizontally using inline-block.
The menu items have text labels "Toy Store", "Configure your Toy", and "About Us".
My challenge is to dynamically change the text of these menu items based on the window size. Specifically, I want the text to change to "Toys", "Configure", and "About" when the parent element can no longer fit them in one line due to reduced width. If the space becomes too narrow even for this, I need the text to be shortened to just "T", "C", and "A" respectively.
Given that this involves both style and content changes, how can I achieve this functionality using a react element?
render () {
const { theme } = this.props;
const { classes } = this.props;
return(
<div style={{flex: 1}}>
<Button color="inherit" variant={this.state.btnVar0} onClick={(e) => this.toggleMenuBtns(0,e)}><span className = {classes.menuButtonMed} >T{this.state.squeeze > 1 ? null : <span >oy</span>}</span>{this.state.squeeze > 0 ? null : <span> Store</ span>}</Button>
<Button color="inherit" variant={this.state.btnVar1} onClick={(e) => this.toggleMenuBtns(1,e)}><span className = {classes.menuButtonTreat}>C{this.state.squeeze > 1 ? null : <span>onfigure</span>}</span>{this.state.squeeze > 0 ? null : <span> your Toy</span>}</Button>
<Button color="inherit" variant={this.state.btnVar2} onClick={(e) => this.toggleMenuBtns(2,e)}><span className = {classes.menuButtonCom} >A{this.state.squeeze > 1 ? null : <span >bout</span>}</span>{this.state.squeeze > 0 ? null : <span> Us</ span>}</Button>
</div>
);
}