title: ReactJS display fetch response onClick
body: <p>Im working on a ReactJS project where you can generate a random activity when pressing the generate button. Im doing a fetch to my api to display some data from it. This works fine. Now I want to do the fetch and display the returned data every time I click the generate button (which is in the home component). So the generate button has to do a new fetch and refresh the component. Also it has to be empty on default. I searched a while and can't find a relevant answer. Can some of you guys help me out? Thanks.</p>
  
  <p><strong>fetch component</strong></p>
  
  <pre><code>import React from "react";
  
  export class ItemLister extends React.Component {
      constructor() {
          super();
          this.state = { suggestion: "" };
      }
  
      componentDidMount() {
          fetch("......./suggestions/random", {
              method: "GET",
              dataType: "JSON",
              headers: {
                  "Content-Type": "application/json; charset=utf-8"
              }
          })
              .then(resp =&gt; {
                  return resp.json();
              })
              .then(data =&gt; {
                  this.setState({ suggestion: data.suggestion });
              })
              .catch(error =&gt; {
                  console.log(error, "catch the hoop");
              });
      }
  
      render() {
          return &lt;h2&gt;{this.state.suggestion}&lt;/h2&gt;;
      }
  }
  </code></pre>
  
  <p><strong>home component</strong></p>
  
  <pre><code>import React from "react";
  import { ItemLister } from "./apiCall";
  
  export class Home extends React.Component {
      constructor(props) {
          super(props);
          console.log();
          window.sessionStorage.setItem("name", this.props.params.name);
          window.sessionStorage.setItem("token", this.props.params.token);
      }
  
      render() {
          return (
              &lt;div className="contentContainer AD"&gt;
                  &lt;table&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;
                                  &lt;p&gt;Het is heel leuk als het werkt!&lt;/p&gt;
                              &lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;ItemLister /&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
                  &lt;div className="container center"&gt;
                      &lt;button&gt;GENERATE&lt;/button&gt;
                      &lt;button&gt;SAVE&lt;/button&gt;
                      &lt;button&gt;MATCH&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>