Навигация по табам

В этом решении мы создаём систему вкладок с переключением между разными разделами контента.

Состояние активной вкладки

const [activeTab, setActiveTab] = useState('profile');

Мы создаём состояние со строковым значением, которое хранит идентификатор текущей активной вкладки. Начальное значение 'profile' означает, что при загрузке будет открыта вкладка профиля. В отличие от булева состояния, здесь может быть несколько возможных значений.

Массив объектов с данными

const tabs = [
    { id: 'profile', label: '👤 Профиль' },
    { id: 'posts', label: '📝 Посты' }

Мы храним информацию о вкладках в массиве объектов. Каждый объект содержит id (уникальный идентификатор) и label (текст для отображения). Это позволяет легко добавлять новые вкладки - достаточно добавить объект в массив.

Рендеринг списка с map

{tabs.map(tab => (
    <button key={tab.id}>
        {tab

Метод map проходит по массиву и возвращает новый массив элементов React. Для каждого объекта tab мы создаём кнопку. Это избавляет от необходимости писать три отдельные кнопки вручную - код становится короче и масштабируемее.

Атрибут key

<button key={tab.id}>

React требует атрибут key для каждого элемента в списке. Это помогает React отслеживать, какие элементы изменились, добавились или удалились. Ключ должен быть уникальным среди соседних элементов. Мы используем tab.id, потому что он уникален для каждой вкладки.

Обработчик с параметром

onClick={() => setActiveTab(tab.id)}

Мы используем стрелочную функцию, чтобы передать параметр в setActiveTab. Если написать просто onClick={setActiveTab(tab.id)}, функция вызовется сразу при рендеринге, а не при клике. Стрелочная функция создаёт новую функцию, которая будет вызвана только при клике.

Условный класс для активной кнопки

className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}

Мы сравниваем текущий activeTab с id кнопки. Если они совпадают, кнопка получает класс active. CSS использует этот класс для визуального выделения активной вкладки - например, другой цвет фона или подчёркивание.

Условный рендеринг контента

{activeTab === 'profile' && (
    <div>
        <h2>👤 Профиль пользователя</h2>
        //...
    </div>

Для каждой вкладки мы проверяем, совпадает ли activeTab с её идентификатором. Только одна проверка будет истинной, поэтому отображается контент только одной вкладки. Когда пользователь кликает на другую кнопку, activeTab меняется, и React перерисовывает компонент с новым контентом.