Fetch and a Jokes Component

portfolio/src/components/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import Projects from './Projects';
 import SocialProfiles from './SocialProfiles';
 import Title from './Title';
+import Jokes from './Jokes';
 import profile from '../assets/profile.png';
 
 class App extends Component {
@@ -37,6 +38,8 @@ class App extends Component {
         <Projects />
         <hr />
         <SocialProfiles />
+        <hr />
+        <Jokes />
       </div>
     ); 
   }

portfolio/src/components/Jokes.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+class Jokes extends Component {
+  state = { joke: {} };
+
+  componentDidMount() {
+    fetch('https://official-joke-api.appspot.com/random_joke')
+      .then(response => response.json())
+      .then(json => this.setState({ joke: json }));
+  }
+
+  render() {
+    const { setup, punchline } = this.state.joke;
+
+    return (
+      <div>
+        <h2>Highlighted Joke</h2>
+        <p>{setup} <em>{punchline}</em></p>
+      </div>
+    )
+  }
+}
+
+export default Jokes;