Итоги: Сервер и клиент

Часть раздела Основы Next.js путешествия по React на Coddy — урок 22 из 47.

Задание

Средне

Итоги главы: проведите границу между сервером и клиентом самостоятельно.

Страница выводит список dishes на сервере, но также помещает onClick прямо на button, поэтому приложение вообще не отрендерится. Исправьте это без пометки страницы как client component:

В components/OpenHours.jsx создайте client component ('use client' в 1-й строке), который хранит логическое значение open в state и рендерит button с id="toggle". Его текст должен быть Show hours, когда он закрыт, и Hide hours, когда открыт.
Когда он открыт, он также рендерит <p> с id="hours" и текстом Open 9am-5pm. Когда закрыт, этого абзаца быть не должно.
В app/page.jsx замените сломанную button и всегда видимый абзац на <OpenHours />, импортированный из '../components/OpenHours'. Заголовок и dish list остаются точно в таком виде, как они есть: страница остается server component.

Попробуйте сами

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}