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

Question

[CHtommy]

Такой вопрос, у меня имеется const :

const [hovered, setHovered] = useState(false);
    const toggleHover = () => setHovered(!hovered);

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

upd: useContext и вообще hovered работает, как срабатывание className, если hovered == true.
Я сразу говорю, что я не сильно "скилловый" во фронте и я уже гуглил хуки в реакте и т.д и т.п, но до меня видимо не доходит...

Answer 1

[antares4045]

Возможно я вас не так понял, но по всей видимости тут дело не в setState, и useContext тут ничем не поможет: вы пытаетесь в булевой переменнной (которая просто содержит либо "да", либо "нет") данные о том, на какой элемент навёл курсор пользователь.

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

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

Comments

[CHtommy]

Спасибо, один вопрос тогда...
У меня меню будет менятся т.к там будут вложенности в виде названия постов, ссылок и т.д
Есть смысл брать redux т.к у меня там "все не так просто" или делать на reduce?
Если хочешь, то кинь мне tg т.к впервые у меня задача сложная для меня и ты первый, кто меня услышал :D
Просто вопросы хотел бы задать по react

[antares4045]

CHtommy, redux ныне деприкейтед, его фейсбук какраз и рекомендует заменить связкой контекста и редюсера. С точки зрения использования разница минимальна, но так код "более функциональный" и без порицаемого так всеми синглотна в ядре логики.

По поводу телеграмма: https://t.me/antares4045
Только я не обещаю, что буду отвечать хоть сколько нибудь быстро. И не ждите, что я буду делать за вас работу.