Challenge and Code: Ten More Jokes

portfolio/src/components/Jokes.js

@@ -1,21 +1,33 @@
 import React, { Component } from 'react';
 
+const Joke = ({ joke: { setup, punchline } }) => (
+  <p style={{ margin: 20 }}>{setup} <em>{punchline}</em></p>
+);
+
 class Jokes extends Component {
-  state = { joke: {} };
+  state = { joke: {}, jokes: [] };
 
   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;
+  fetchJokes = () => {
+    fetch('https://official-joke-api.appspot.com/random_ten')
+      .then(response => response.json())
+      .then(json => this.setState({ jokes: json }));
+  }
 
+  render() {
     return (
       <div>
         <h2>Highlighted Joke</h2>
-        <p>{setup} <em>{punchline}</em></p>
+        <Joke joke={this.state.joke} />
+        <hr />
+        <h3>Want ten new jokes?</h3>
+        <button onClick={this.fetchJokes}>Click me!</button>
+        {this.state.jokes.map(joke => (<Joke key={joke.id} joke={joke} />))}
       </div>
     )
   }