import React, { useState } from 'react';

function LoginButton(props) {
  const { loggedIn, logIn, logOut } = props;

  return (
    <>
      <h3>{loggedIn ? 'Logged in' : 'Logged out'}</h3>
      {
        loggedIn
          ? <button onClick={logOut}>Log out</button>
          : <button onClick={logIn}>Log in</button>
      }
    </>
  );
}

function App() {
  const [ loggedIn, setLoggedIn ] = useState(false);

  return (
    <LoginButton
      loggedIn={loggedIn}
      logIn={() => setLoggedIn(true)}
      logOut={() => setLoggedIn(false)}
    />
  );
}

export default App;