import React, {useState} from 'react';
import './App.css';
import Conditional from './Conditional'

function App() {
  const [isloggedIn,setIsLoggedIn] = useState(false)

  return(
    <div>
      <Conditional
	    status={isLoggedIn}
		logIn={() => setIsLoggedIn(true)}
		logOut={() => setIsLoggedIn(false)}
	  />
    </div>
  )
}

export default App;

________________________________

import React from 'react'

function Conditional(props) {
    const { isLoggedIn, logIn, logOut } = props;

    return (
        <div>
            <h3>User status: {isLoggedIn ? "logged in" : "logged out"}</h3>
			{
				isLoggedIn
					? <button onClick={logOut}>Log out</button>
					: <button onClick={logIn}>Log in</button>
			}
        </div>
    )
}

export default Conditional