CODEWITHSUNDEEP
javascriptcssreactjs
Денис Босый
Денис Босый

Reputation: 39

How to change style of an element onClick at another element REACT?

I want to change .page-header when i click on standard-basic. I tried to do this:

#standard-basic:focus ~ .page-header{
  display: none;
}

But it can't help me. How can change style of page-header in react or maybe just in js? I use functional component

 <span id="pageHeader" className="page-header">TechPrice</span>
  <form
    className={props.classes.root}
    noValidate
    autoComplete="off"
    className="search-form"
  >
    <TextField className="textField" id="standard-basic" label="Поиск" />
    <SearchIcon className="search-icon" />
  </form>

Upvotes: 0

Views: 390

Answers (2)

Mario Boss
Mario Boss

Reputation: 1995

There is no parent selector in CSS/CSS3.

Please read this topic: Is there a CSS parent selector?

To achieve your goal you have to use JavaScript/React/any other framework/library

Upvotes: 0

asmaa
asmaa

Reputation: 725

I think you need to use style object and set display prop to none depend on some state

Example:

<span id="pageHeader" style={{"display": `isVisible ? "block" : "none"`}}>TechPrice</span>

Upvotes: 1

Related Questions