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

Question

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>

Add a local state to select styles for your element. – keikai Mar 09 '20 at 13:07 — keikai, Mar 09 '20 at 13:07
You cannot target parents or their siblings with CSS – Anurag Srivastava Mar 09 '20 at 13:10 — Anurag Srivastava, Mar 09 '20 at 13:10

score 1 · Accepted Answer · answered Mar 09 '20 at 13:10

1

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>

answered Mar 09 '20 at 13:10

asmaa

638
3
12

score 0 · Answer 2 · answered Mar 09 '20 at 13:14

0

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

answered Mar 09 '20 at 13:14

Mario Boss

819
3
10
36

Look at the question and it's tags, he is using React. This is not an answer to the question. – HMR Mar 09 '20 at 13:19

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

2 Answers2