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?

Why are you using state to add more complexity? Why not just use Normal JavaScript? — Train, Feb 02 '18 at 17:23
I don't understand your question. `I want to change the position of a div's className using onClick from a .` — Train, Feb 02 '18 at 17:26
so I have a curent state of displayedComponent which is a Carousel. When I click on the
it displays the Carousel and also is desplayed by default. After I have the myMenu in which I have another 4 components. When I click on each button it displays the component of that button. The thing is I want the myMenu to have absolut position when I display the Carousel. When I display other component I want that position to be gone. So I was thinking to change the the style of myMenu using the onClick event from my
tag. How can I do that? — Daniel Bisceanu, Feb 02 '18 at 17:27
With Normal css. Don't add unnecessary complexity with state. Take a look at this. https://stackoverflow.com/questions/38545219/how-to-apply-css-and-styling-to-a-react-component — Train, Feb 02 '18 at 17:35
Possible duplicate of [How to apply CSS and Styling to a React component](https://stackoverflow.com/questions/38545219/how-to-apply-css-and-styling-to-a-react-component) — Train, Feb 02 '18 at 17:35

score 0 · Accepted Answer · answered Feb 02 '18 at 18:00

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

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

tag. How can I do that?

1 Answers1