В этом задании мы создадим компонент с вкладками (табами) для переключения между разными разделами контента.
Табы (вкладки) - это UI-паттерн, который позволяет организовать контент в отдельные секции и переключаться между ними. Это как папки в шкафу - вы видите все названия, но открываете только одну.
Для табов нам нужно состояние, которое хранит идентификатор активной вкладки. В отличие от булевого состояния (true/false), здесь у нас несколько возможных значений - например, 'profile', , .
Обратите внимание на key - это специальный атрибут, который помогает React отслеживать элементы списка.
Для отображения разного контента используем условный рендеринг:
{activeTab ==='home'&&<div>Контент главной</div>}{activeTab ==='about'&&<div>Контент о нас</div>}
Задание
Необходимо создать компонент с вкладками. Создайте состояние activeTab с начальным значением 'profile'. Используйте метод map для рендеринга кнопок из массива tabs. При клике на кнопку обновляйте activeTab на tab.id. Добавьте класс 'active' к кнопке, если её tab.id совпадает с activeTab. Отобразите соответствующий контент для каждой вкладки с помощью условного рендеринга - профиль для 'profile', посты для 'posts', настройки для 'settings'.
