@CHtommy

Как сделать разные состояния у объектов useContext?

Такой вопрос, у меня имеется const :
const [hovered, setHovered] = useState(false);
    const toggleHover = () => setHovered(!hovered);

Как только ты юзаешь это в родительском компоненте, то все объекты имеют hover, при этом активный становится тот, на который была наведена мышь.
Как только этот компонент становится дочерним и const остается в род.компоненте, то все ломается и на выходе я имею hover на всех элементах независимо от того, куда наведется мышь(на любой из элементов) (вывожу через props).
Мне посоветовали дать родительскому элементу useContext и раскрыть его в дочернем, но эффект одинаковый.
Как дать дочернему компоненту разные состояния в элементах? Не понимаю, как взаимодействовать...

upd: useContext и вообще hovered работает, как срабатывание className, если hovered == true.
Я сразу говорю, что я не сильно "скилловый" во фронте и я уже гуглил хуки в реакте и т.д и т.п, но до меня видимо не доходит...
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
@antares4045
Возможно я вас не так понял, но по всей видимости тут дело не в setState, и useContext тут ничем не поможет: вы пытаетесь в булевой переменнной (которая просто содержит либо "да", либо "нет") данные о том, на какой элемент навёл курсор пользователь.

Не сильно корёжа вашу структуру могу предложить вам завести в вашем родительском компоненте отдельные стейты для каждого дочернего компонента и пробрасывать соответственно их.
Хотя лучше изучите как, пользоваться хуком useReduce (чтобы хранить всю информацию о ховерах в одном стейте)

UPD: набросал код, отвечающий на изначальный вопрос, только контекст в нём реально лишний: достатоно было бы реализовать редюсер в корне и пробрасывать обёртки вокруг него пропсами.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы