Как изменить контент в блоке по клику на ссылку изменить контент в React?

Question

[Даниил Чистяков]

Слева есть ссылки, справа есть блок, в котором должен выводиться контент в зависимости от клика на определённую ссылку из левого столбца.
Решение должно быть для React, заранее благодарю.
Есть ощущение, что нужно копать в сторону пропсов, но пока не очень понимаю как это осуществить со стороны логики и кода.

Answer 1

[Павел]

Попробуй поставить атрибут onClick={Func} а уже Fuck будет менять содержимое.

Comments

[Даниил Чистяков]

Была такая идея, а как реализовать это в функции, может сделать какое-либо присвоение, а потом if или всё-таки пропсами как-то?
Пока пришёл только к такому :), я просто пока ещё особо не работал с пропсами и функциями.

<p onClick={() => console.log("I was clicked!")}>Дизайн</p>
<p onClick={() => console.log("I was clicked!")}>Разработка</p>
<p onClick={() => console.log("I was clicked!")}>Аналитика</p>
<p onClick={() => console.log("I was clicked!")}>Поддержка</p>

[Андрей]

в сторону React Router копай

[Павел]

Даниил Чистяков, Возможно это тебе поможет https://letsbuildui.dev/articles/building-a-vertic...

это относится к UI там в тех элементах логики ни какой нет?

Answer 2

[n1ksON]

Два варианта:

1. На чистом ReactJS.
Пишите useState, в котором массив с объектами данных. На каждую кнопку вешаете одно и тоже событие, которое будет выводить контент, в зависимости от id блока, на который кликнули. Почитайте про хуки, а именно useState и можете ещё useEffect захватить. А также про обработку событий.

2. Как уже предлагали в комментариях, использовать react-router-dom.
Почитайте про Router и Link, посмотрите базовые примеры использования в документации. Вот как раз отличный пример из доки