React change a className's style using onClick from another tag

Question

So I want to change the position of a div's className="myMenu" using onClick from a h1 tag element.To be more specific I have:

<div className="myMenu">
    <button onClick={()=> this.setState({ displayedComponent : Resume})}> Resume </button>
    <button onClick={()=> this.setState({ displayedComponent : Travel})}> Travel </button>
    <button onClick={()=> this.setState({ displayedComponent : Art})}> Art </button>
    <button onClick={()=> this.setState({ displayedComponent : Contact})}> Contact Me </button>
</div>

and I want to change myMenu's position using the onClick from

<h1 onClick={()=> this.setState({ displayedComponent : Carousel}) *Here I would like to add something like document.getElementByClass('myMenu').style.position= 'absolute'* }> No mad Life </h1>.

I want to change the myMenu.style.position just using the onClick event from h1 onClick="..."

I don't know how the syntax should be but I am pretty sure it doesn't work like normal js with document.getElementByClass('').style.position = 'absolute'. Can anyone tell me how to manipulate this className's style?

Answer 1

A possible solution, in the simplest terms, simply switch or append something to the classname on the myMenu element, based on state.

<div className={`myMenu ${this.state.displayedComponent === Carousel ? 'modifier-class' : ''}`}>

And then add a css definition for the modifier class to position it absolutely