example2.js

import React, { useState } from 'react'
import Header from './components/Header.js'
import Game from './components/Game.js'
import LeaderBoard from './components/LeaderBoard.js'
import Spinner from './components/Spinner.js'

// Don't hardcode strings, use constants
const DEFAULT_NAME = 'jeff'

export default function App(){
    const [opponentName, setOpponentName] = useState(DEFAULT_NAME) 
    const [loading, setLoading] = useState(false)
    const showGame = () => setOpponentName(opponentName || DEFAULT_NAME)
    return [
      <Header/>, 
      <GameContent 
        opponentName={opponentName}
        loading={loading}
        showGame={showGame}
      />  
    ]
}

const GameContent = ({ opponentName, loading, showGame }) => {
  if (loading) {
    // Page is loading.
    return <Spinner/>
  } else if (opponentName) {
    // A game is running.
    return <Game/>
  } else {
    // Prompt user to start a new game.
    return <button onClick={showGame}>click</button>
  }
}