A simple app passing data down through props

App.js

import React, { useState } from "react";

function App() {
  const [user, setUser] = useState('John');
  
  return (
    <div>
      <NavBar setUser={setUser} />
      <MainPage user={user} />
    </div>
  )
}

export default App;

// Navbar component
function NavBar({ setUser }) {
  return (
    <nav
      style={{
        display: "flex",
        alignItems: "center",
        padding: "0.5rem 1rem",
        backgroundColor: "rgb(248 250 252)",
      }}
     >
      <h3 style={{ marginRight: "auto" }}>Navbar</h3>
      <button
        style={{
          borderRadius: "1rem",
          padding: "0.5rem",
          backgroundColor: "rgb(203 213 225)",
        }}
        onClick={() => setUser('Jane')}
      >
        Change to Jane
      </button>
    </nav>
  )
}

// MainPage component
function MainPage({ user }) {
  return (
    <div style={{ marginTop: "2rem", textAlign: "center"}}>
      <h2>Main Page</h2>
      <WelcomePage user={user} />
    </div>
  )
}

// WelcomePage component
function WelcomePage = ({ user }) {
  return (
    <div>
      <WelcomeMessage user={user} />
      {/** Some other welcome page code */}
    </div>
  );
}

// WelcomeMessage component
const WelcomeMessage = ({ user }) => {
  return (
    <h1>Hey, {user}!</h1>
  );
}