const { useState, useContext } = React;

const userNameContext = React.createContext("");

const SignIn = () => {
  const [userName, setUserName] = useState("");
  const [isSignIn, setIsSignIn] = useState(false);
  
  const signIn = () => {
    if (!userName) return;
    setIsSignIn(true);
  };
  
  return (
    <>
      {!isSignIn ?
      <>
        <input 
          type="text" 
          value={userName} 
          onChange={e => setUserName(e.target.value)}
        />
        <button onClick={() => signIn()}>
          sign in
        </button>
      </>
      :
      <userNameContext.Provider value={userName}>
        <MyPage/>
      </userNameContext.Provider>
      }
    </>
  );
};

const MyPage = () => {
  const userName = useContext(userNameContext);
  return (
    <h3>{userName}</h3>
  );
};

ReactDOM.render(<SignIn />, document.getElementById('app'));