title: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
body: <p>just trying to render a list of items obtained from my backend but getting this error indicating it's undefined.  However, when I check the console log I can see that the component's state definitely has 5 items in the array.</p>
  
  <pre><code>class PubSubTopics extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              pubsubtopics: ['one', 'two', 'three'],
          }
      }
  
      componentDidMount() {
          this.callBackEndAPI()
              .then(res =&gt;
                  this.setState({pubsubtopics: res.express}))
              .catch(err =&gt; console.log(err));
          console.log('after setting state');
          console.log(this.state.pubsubtopics);
      }
  
  
      callBackEndAPI = async () =&gt; {
          const response = await fetch('/listtopics');
          const body = await response.json();
  
          if(response.status !== 200){
              throw Error(body.message)
          }
          console.log('after API responded');
          console.log(body.topics);
          return body.topics;
      }
      render(){
          const list = [];
          for(const[index, value] of this.state.pubsubtopics){
              list.push(&lt;li key={index}&gt;{value}&lt;/li&gt;)
          }
          return(
              &lt;div&gt;
                  &lt;ul&gt;
                      {list}
                  &lt;/ul&gt;
                  &lt;button onDoubleClick={this.handleClick}/&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>Console log:</p>
  
  <pre><code>after setting state
  index.js:21 (3) ["one", "two", "three"]
  index.js:32 after API responded
  index.js:33 (5) [{…}, {…}, {…}, {…}, {…}]
  </code></pre>
  
  <p>Any idea why it's saying this.state.pubsubtopics is undefined?</p>