How to call a state from a component to a page?

I am creating an example dApp which carries the "Header" component at the top of the page for every page. So, I have created a header component and I make people connect to their MetaMask wallet in Header.tsx, which they do successfully and I keep their wallet ID with currentAccount state.

Header.tsx:

const Header: FunctionComponent<{}> = (props) => {
const [currentAccount, setCurrentAccount] = useState("");

async function checkAccount() {
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' })
    setCurrentAccount(accounts[0]);
}

return (
    <header>
                    <div className="col-xl-3 col-lg-3 col-md-3 col-sm-3">
                        <ul>
                            <li>{!connectHidden && <button className="buy connect-wallet" onClick={connectWallet}><b>Connect Wallet</b></button>}</li>
                        </ul>{currentAccount}
                        <ul>
                            <li>{!disconnectHidden && <button className="buy connect-wallet" onClick={disconnectWallet}><b>Disconnect Wallet</b></button>}</li>
                        </ul>
                    </div>

    </header>
);
};

export default Header;

But at my homepage, there are no codes for anything about getting user's wallet ID, I don't want to rewrite the code here as it is not the right way. As a newbie in react, I couldn't make the codes I have tried work like trying to import a function or variables. How do I call the currentAccount state in my home page?

Home.tsx:

const HomePage: FunctionComponent<{}> = () => {

    useEffect(() => {

        onInit()

        return () => { }
    }, [])

    async function onInit() {
        
    }

    async function onClickMint() {
        alert("mint");
    }

    return (
        <>
            <div>xx
            </div>
        </>
    );
};
export default HomePage;

Here is my app.tsx and as you can see, I am seeing all of the components at once. But I want to use the state I have got at Header component in my Home component.

App.tsx:

import Header from './components/Header';


    const App: FunctionComponent<{}> = () => {
        return (
            <Router>
                <Header />
                <Route exact path="/" component={HomePage} />
                <Route exact path="/wallet" component={Wallet} />
                <Footer />
            </Router>
        );
    };
    export default App;

Solution

Quick answer:

simply create your state at the top level (App.tsx) and give currentAccount, setCurrentAccount as props for the other components

App.tsx:

import Header from './components/Header';

const App: FunctionComponent<{}> = () => {
    const [currentAccount, setCurrentAccount] = useState("");

    return (
        <Router>
            <Header />
            <Route exact path="/">
            <HomePage currentAccount={currentAccount} setCurrentAccount={setCurrentAccount}/>
            </Route>
            <Route exact path="/wallet">
            <Wallet  currentAccount={currentAccount} setCurrentAccount={setCurrentAccount}/>
            </Route>
            <Footer />
        </Router>
    );
};
export default App;

Longer answer:

You need to inform yourself about redux or simply the useContext hook

For instance with the useContext hook you can create a context that will contain your state and that you will be able to access in any child component without using props which can be redundant when you have multiple children and grandchildren ...

Here you can find the documentation about how to use the useContext Hook : https://reactjs.org/docs/hooks-reference.html#usecontext