Необходимо изменить поведение так, чтобы при каждом нажатии на кнопку «toggle page» внутренний счётчик компонента Counter возвращался к нулю. Сейчас значение счётчика хранится в дочернем компоненте и сохраняется при смене свойства page, поэтому требуется добавить логику сброса состояния, используя хуки React.

import React, { useState, FC } from "react";

const ClickInfo: React.FC<{ clicks: number }> = ({ clicks }) => {
    return <p>Clicked: {clicks}</p>;
};

export const Counter = () => {
    const [clicks, setClicks] = useState(0);
    const increase = () => {
        setClicks((prev) => prev + 1);
    };

    return (
        <div>
            <button onClick={increase}>Click me!</button>
            <ClickInfo clicks={clicks} />
        </div>
    );
};

const Page: FC<{ page: string }> = ({ page }) => {
    return (
        <div>
            page: {page}
            <Counter />
        </div>
    );
};

export const SwitchView = () => {
    const [currentView, setCurrentView] = useState<"one" | "two">("one");

    return (
        <>
            <button
                onClick={() =>
                    setCurrentView((prev) => (prev === "one" ? "two" : "one"))
                }
            >
                toggle page
            </button>
            <Page page={currentView} />
        </>
    );
};

``

Обнуление счётчика при переключении страницы