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

function App() {

  const [joke, setJoke] = useState([]);
  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}
        </p>
      </header>
    </div>
  );
}

export default App;