<div class="container">
  <div id="jokes"></div>
  <button id="add-button" type="button">Generate Joke</button>
</div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script type="text/babel" src="app.jsx"></script>
html,
body {
   margin: 0;
   height: 100%;
   font-family: Arial, Helvetica, sans-serif;
}

body,
.container {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}
const jokesDOM = document.getElementById("jokes");
const addButtonDOM = document.getElementById("add-button");
const handleResponse = (data) => {
  const App = ({ data }) => {
    return (
      <p>
        <span>{data.setup + " "}</span>
        <i>{data.delivery}</i>
      </p>
    );
  };
  ReactDOM.render(<App data={data} />, jokesDOM);
};
const addJoke = () => {
  fetch("https://v2.jokeapi.dev/joke/Programming?type=twopart")
    .then((response) => response.json())
    .then((data) => handleResponse(data));
};

addButtonDOM.addEventListener("click", addJoke);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.