title: Function not being called when using async/await in React
body: <p>I am trying to to an asynchronous fetch call once my modal is opened. I need that call because It fetched images and it will take around 5 seconds for the fetch to get a response. </p>
  
  <p>So the modal should show first with the data and then once the fetch is complete, it should show the fetch data also. </p>
  
  <p>My problem is that at the moment when calling the function with this <code>() =&gt; {this.fetchImages(id)</code> it is not called. I assume it's because the function is being assigned and not called. </p>
  
  <p>But when I call the function <code>fetchImages()</code> without the <code>() =&gt;</code>, I get this error :</p>
  
  <pre><code>Invariant Violation: Minified React error #31
  </code></pre>
  
  <p>This is my code, irrelevant part has been removed for simplicity:</p>
  
  <pre><code>renderModal = () =&gt; {
      ...
      return (
  
        &lt;Modal open={openModal != null} onClose={this.closeModal}
               little showCloseIcon={true} styles={modalStyles}&gt;
          &lt;div className="item"&gt;
            ...
            {() =&gt; {this.fetchImages(id)
               .then(r =&gt; console.log("Fetch result" + r))}}
          &lt;/div&gt;
        &lt;/Modal&gt;
      );
    }
  
  fetchImages = async (id) =&gt;{
      console.log("Request started")
      try{
        let myImages = null;
        if(typeof(id) !== 'undefined' &amp;&amp; id != null) {
          myImages = await fetchImages(id);
          console.log("Images: " + myImages);
          return (
            &lt;div&gt;
              {Array.isArray(myImages) &amp;&amp; myImages.length !== 0 &amp;&amp; myImages.map((item, key) =&gt;
                &lt;p&gt;Image name: {item.name}, En device name: {item.name.en_US}&lt;/p&gt;
              )}
            &lt;/div&gt;
          );
        }
      } catch (e) {
        console.log("Failed")
      }
    }
  </code></pre>
  
  <p><strong>EDIT</strong>
  By changing the code as suggested by <code>jack.benson</code> and <code>GalAbra</code>, I ran into an issue where I am stuck in an endless loop. I will add the new code:</p>
  
  <p>Once the page loads up the <code>renderModal</code> is called in <code>render()</code> method:</p>
  
  <pre><code>{this.renderModal()}
  </code></pre>
  
  <p>Then I have a button that would show the modal since modal contains a line :</p>
  
  <pre><code>&lt;Modal open={openModal != null} onClose={this.closeModal}
           little showCloseIcon={true} styles={modalStyles}&gt;
  </code></pre>
  
  <p>It is called from here:</p>
  
  <pre><code>myMethod = (task) =&gt; {
      ...
  
      return (
    &lt;div {...attrs}&gt;
        ...
        &lt;button onClick={() =&gt; {this.showModal(documents[0])}}&gt;{translate('show_more')} &amp;raquo;&lt;/button&gt;
        &lt;/div&gt;
        }
      &lt;/div&gt;
    &lt;/div&gt;
  );};
  </code></pre>
  
  <p>And the part to show the modal:</p>
  
  <pre><code>  showModal = (document) =&gt; {
      this.setState({ modalOpen: document });
    };
  </code></pre>
  
  <p>And now the new <code>renderModal()</code>:</p>
  
  <pre><code>renderModal = () =&gt; {
        const doThing = async () =&gt; {
        try {
          const newImages = await downloadDeviceImages(id);
          return { data: newImages };
        } catch (e) {
          console.log("Failed")
        }
      };
  
      const test = async (id) =&gt; {
        const imageData = await doThing(id);
        console.log("after", imageData.data);
        this.setState({
          imageData: imageData.data
        });
      };
  
      if(typeof(id) !== 'undefined' &amp;&amp; id != null) {test(id);}
  
      return (
  
        &lt;Modal open={openModal != null} onClose={this.closeModal}
               little showCloseIcon={true} styles={modalStyles}&gt;
          &lt;div className="item"&gt;
            ...
        &lt;div&gt;
          {this.state.imageData.map((item, key) =&gt;
            &lt;p&gt;Device name: {item.name}, En device name: {item.name.en_US}&lt;/p&gt;
          )}
        &lt;/div&gt;
        &lt;/Modal&gt;
      );
    }
  </code></pre>
  
  <p>The main part here is that the button will be clicked multiple times and it might have different ID on every click so a new request should be made every time.</p>