Как изменить class родителя, при наведении на дочерний элемент?

Question

[Golopolos]

Делаю так, но происходит изменение класса в самом дочернем элементе, а не в родителе

const [ishover, sethover] = useState(false)

function MouseOver() {
    sethover(true)
  }

  function MouseOut() {
    sethover(false)
  }

<div className={`comment ${ishover ? 'highlighted' : ''}`}>
  родитель
</div>
<div onMouseEnter={() => MouseOver(comment.id)} onMouseLeave={() => MouseOut(comment.id)}>
    дочерний
</div>

Answer 1

[Nikolay Matyushkin]

Это называется подъём состояния
Когда у родителя есть стейт, например
const [isShow, setShow] = useState(false)
который пробрасывается дочерним компонентам (там, где это нужно, разумеется) для его изменения

1) завязываем на isShow логику у родителя (например на стилевой класс)
2) пробрасываем в дочерний элемент setShow и тригерим тогда, когда надо поменять состояние isShow

Comments

[Golopolos]

Я это понимаю... По сути я тоже самое и сделал.
Я так понимаю нужно использовать e.current в function MouseOver?

[Nikolay Matyushkin]

Golopolos, ну можно и проще, просто сделать функцию переключатель типа

const toggleShow = () => {
   setShow(!isShow)
}

и уже её прокидывать дочерним элементам.