I am looking to dynamically change the position of a div with the class name "myMenu" using an onClick event triggered from an h1 tag element. Specifically, my current setup looks like this:
<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>
My goal is to modify the position of "myMenu" by setting its style properties with an onClick event from
<h1 onClick={()=> this.setState({ displayedComponent : Carousel})
*Here I would like to include a script such as document.getElementByClass('myMenu').style.position= 'absolute'* }> No mad Life </h1>I am unsure of the correct syntax for achieving this, as it seems conventional JavaScript methods like document.getElementByClass('').style.position = 'absolute' may not work. Can someone assist me in understanding how to manipulate the style of this class name?