React prop drilling example

index.js

import React, { useState } from "react";

export const Account = () => {
    const [user, setUser] = useState({ name: "Marcin", country: "Poland" });

    <AccountDetails user={user} setUser={setUser} />;
};

export const EditAccount = (props) => {
    const { user, setUser } = props;

    return (
        <form>
            <input
                type="text"
                value={user.name}
                onChange={(e) =>
                    setUser({
                        ...user,
                        name: e.target.value,
                    })
                }
            />

            <input
                type="text"
                value={user.country}
                onChange={(e) =>
                    setUser({
                        ...user,
                        country: e.target.value,
                    })
                }
            />
        </form>
    );
};

export const AccountDetails = props => {
    const { user, setUser } = props;

    return (
        <>
            <h1>{user.name}</h1>
            <p>Country: {user.country}</p>

            <EditAccount user={user} setUser={setUser}></EditAccount>
        </>
    );
};