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

function App() {

  const [joke, setJoke] = useState(null);

  useEffect(() => {
    fetch('/api/badjokes')
      .then((response) => response.json())
      .then((data) => {
        console.log(data.joke);
        setJoke(data.joke);
      })
      .catch((err) => {
        console.log(err.message);
      });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <p>
          Here is your joke: {joke ? <span>{joke}</span> : <span>Loading...</span>}
        </p>
      </header>
    </div>
  );
}

export default App;