Почему не отрабатывает onMouseOver?

[Vlad Kopernikov]

Задача: вывести при наведении всех пользователей, которые родились в этом месяце. Переменная меняет значение в функции onHover, которая вызывается методом onMouseOver Пробовал и без использования .bind, ошибка не перестает преследовать:
TypeError: Cannot read property 'onHover' of undefined
Как пофиксить функцию onHover? Заранее спасибо!

https://jsfiddle.net/kw12ab94/

[Malleys]

TypeError: Cannot read property 'onHover' of undefined

У вас функция объявлена как — onHover, но вы её почему-то пытаетесь вызвать как this.onHover.

В самой функции вы пытаетесь изменить значение константы usersVisible! (Тогда уж следовало объявить

const [usersVisible, setUsersVisible] = React.useState(false);

и использовать

onMouseOver={() => setUsersVisible(true)}
onMouseOut={() => setUsersVisible(false)}

) Но такой скрипт работает только с мышкой и к тому же показывает при наведении мышкой всех пользователей всех месяцев!

Я рекомендую вам не использовать usersVisible. Вместо этого используйте возможности CSS. Т. е. вам тогда следует удалить onMouseOver, onHover, заменить

{n.users.map(
								user =>
									usersVisible ? (
										<div key={user.id}>
											<div>
												<h4 className={classes.userId}>user #{user.id}</h4>
												данные пользователя...
											</div>
										</div>
									) : null
							)}

на

{n.users.map(user => <div key={user.id}>
    <div>
        <h4 className={classes.userId}>user #{user.id}</h4>
        данные пользователя...
    </div>
</div>)}

и объявить CSS (оберните пользователей в <section>)

#months h2 + section {
	display: none;
}
#months:hover h2 + section {
	display: block;
}

Кстати! Объявите начальное состояние так...

const [users, setUser] = React.useState([]);

и вам не придётся писать так...

users &&
		users.reduce(

Вот исправленный пример со всем тем, о чём я говорил... https://codepen.io/Malleys/pen/YzPaOjy?editors=0010

[рони]

Malleys,
почему n.users, а не n.users.length?

className={
							n.users > 0
								? classes.month.grey
								: n.users > 2 ? classes.blue : n.users > 6 ? classes.green : classes.red
						}

[Malleys]

почему n.users, а не n.users.length?

Очевидно, что Vlad Kopernikov не умеет работать с длиной массивов (исправил!), а я больше сосредоточился на onHover (из которого следовало, что автор не понимает смысл константы и состояния компонента в React!)