title: Component will not wait for API response before rendering
body: <p>I have tried conditional rendering with a flag set after the API call and also using componentDidMount but cannot get this component to wait for an API response before rendering. I know the API response is valid because it is logging ok in the console. I'm new to react, could you tell me what I'm doing wrong? I have looked at the similar questions on Stackoverflow and can't find a fix. Many thanks!</p>
  
  <p>I have cut some methods out of the code snippet to make it more readable.</p>
  
  <pre><code>import { OTSession, OTPublisher, OTStreams, OTSubscriber } from 'opentok-react';
  
  import {
    SAMPLE_SERVER_BASE_URL,
  } from './config';
  
  export default class CallPane extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        error: null,
        connection: 'Connecting',
        publishVideo: true,
        apiKey: '',
        sessionId: '',
        token: '',
        isLoaded: false,
      };
  
    componentDidMount() {
      fetch(SAMPLE_SERVER_BASE_URL + '/session')
        .then(data =&gt; data.json())
        .then(data =&gt; {
          console.log(data)
          this.setState({ apiKey: data.apiKey })
          console.log(data.apiKey)
          this.setState({ sessionId: data.sessionId })
          console.log(data.sessionId)
          this.setState({ token: data.token })
          console.log(data.token)
          this.setState({ isLoaded: true })
        })
        .catch((err) =&gt; {
          console.error('Failed to get session credentials', err);
          alert('Failed to get opentok sessionId and token. Make sure you have updated the config.js file.');
        });
    }
  
    render() {
  
      const { error, connection, publishVideo } = this.state;
      // const { apiKey, sessionId, token } = this.state;
  
      return (
        // (isLoaded) 
        &lt;div&gt;
          &lt;div id="sessionStatus"&gt;Session Status: {connection}&lt;/div&gt;
          {error ? (
            &lt;div className="error"&gt;
              &lt;strong&gt;Error:&lt;/strong&gt; {error}
            &lt;/div&gt;
          ) : null}
          &lt;OTSession
            apiKey={this.apiKey}
            sessionId={this.sessionId}
            token={this.token}
            onError={this.onSessionError}
            eventHandlers={this.sessionEventHandlers}
          &gt;
            &lt;button id="videoButton" onClick={this.toggleVideo}&gt;
              {publishVideo ? 'Disable' : 'Enable'} Video
            &lt;/button&gt;
            &lt;OTPublisher
              properties={{ publishVideo, width: 250, height: 250, }}
              onPublish={this.onPublish}
              onError={this.onPublishError}
              eventHandlers={this.publisherEventHandlers}
            /&gt;
            &lt;OTStreams&gt;
              &lt;OTSubscriber
                properties={{ width: 300, height: 300 }}
                onSubscribe={this.onSubscribe}
                onError={this.onSubscribeError}
                eventHandlers={this.subscriberEventHandlers}
              /&gt;
            &lt;/OTStreams&gt;
          &lt;/OTSession&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>