Я просто изучал React по материалам где все уроки были построены на классах и обычных this.setState, без хуков, и сейчас путаюсь, потому-что думаю так как учили, а тут уже что-то новое и каша какая-то получается у меня. В перспективе конечно хочу и хуки виучить, и компонеты на основе функций, но пока не хочу смешивать что б лучше разобраться.
<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'));