Как сделать на React чтобы при наведении на левую часть сайта правая становилась темнее и наоборот?

Question

[antonstolar]

Хотел бы узнать, как реализовать приведенный ниже код в React приложение? Просто проблема заключается в том, что я пока что достаточно поверхностно разбираюсь в React и синтаксисе Babel. А сам код может понадобиться в скором времени в реализации совместно с React.

Задача такая:
Есть главная страница сайта, на одной части (левой) список товаров для женщин на второй(правой) для мужчин, когда я навожу мышь на левую часть то правая становится темнее, и наоборот если на правую навожу, то левая становится темнее.
Примерно так:
мышь на левой части:

мышь на правой части:


Пример кода (HTML, CSS, JS).

<div id="left">
</div>


<div id="right">
</div>

let left = document.getElementById('left');
let right = document.getElementById('right');

left.addEventListener('mouseover', () => {
  right.classList.add('dark');
});
left.addEventListener('mouseleave', () => {
  right.classList.remove('dark');
});

right.addEventListener('mouseover', () => {
  left.classList.add('dark');
});
right.addEventListener('mouseleave', () => {
  left.classList.remove('dark');
});

#left{
    height: 940px;
    width: 50%;
    position: absolute;
    top:0px;
    
    
}
#right{
    height: 940px;
    width: 50%;
    position: absolute;
    top:0px;
    left:50%;
}
.dark {
  background-color: rgba(0,0,0,0.5);
}

Answer 1

[0xD34F]

<div id="app"></div>

function App() {
  const [ dark, setDark ] = React.useState(null);
  const updateDark = e => setDark(e.type === 'mouseover' ? e.currentTarget.id : null);

  return (
    <React.Fragment>
      {[ 'left', 'right' ].map(n => (
        <div
          id={n}
          key={n}
          onMouseOver={updateDark}
          onMouseLeave={updateDark}
          className={dark && dark !== n ? 'dark' : ''}
        ></div>
      ))}
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

Comments

[antonstolar]

Cпасибо вам!
Хочу спросить у вас еще, а вот есть строки кода:

{[ 'left', 'right' ].map(n => (
        <div
          id={n}
          key={n}
          onMouseOver={updateDark}
          onMouseLeave={updateDark}
          className={dark && dark !== n ? 'dark' : ''}
        ></div>
      ))}

Можно ли считать что этот код, это не явно созданный объект:

{
  ['left', 'right'].map(function (n) {
    return React.createElement('div', {
      id: n,
      key: n,
      onMouseOver: updateDark,
      onMouseLeave: updateDark,
      className: dark && dark !== n ? 'dark' : ''
    });
  });
}

где id свойство объекта а n значение обьекта.
где onMouseOver свойство объекта а updateDark значение обьекта.

или то, что они находятся в { } это просто такие ссылки на код выше? Например ссылка на константу updateDark которой присвоили функцию?

[0xD34F]

antonstolar, https://ru.reactjs.org/docs/introducing-jsx.html#j...

Answer 2

[Петр Мухуров]

один из вариантов

const [mousePosition, setMousePosition] = useState(null);
const clL = {
  "dark": mousePosition === "left"
}
const clR = {
  "dark": mousePosition === "right"
}

return (
  <>
    <div id="left" onMouseOver={() => setMousePosition("left") className={cx(clL)} onMouseLeave={() => setMousePosition(null)}></div>
    <div id="right" onMouseOver={() => setMousePosition("right") className={cx(clR)} onMouseLeave={() => setMousePosition(null)}></div>
  </>
)

Но это если сильно хочется. А вообще, такая вещь делается одной строкой в css:

#left:hover {
    background-color: rgba(0,0,0,0.5);
  }
  #right:hover {
    background-color: rgba(0,0,0,0.5);
  }