title: JSX this.state.STATE.map is not a function
body: <p>Issue: this.state.previousWords.map() is nor recognized as a function</p>
  <p>I have a hangman app that is trying to render previously seen words onto the page in their own line. The issue happens when a new word is added to the array in the state previousWords: []. When the page tries to re-render this it errors stating &quot;TypeError: this.state.previousWords.map is not a function.&quot; Below is the code snippet where the error is happening.</p>
  <p>Based off a prior project this is correct syntax (code has been included). I need help understanding why this is not recognized and how to fix it.</p>
  <pre><code>
  &lt;div className=&quot;col-3&quot;&gt;
                          &lt;h3&gt;Previous words:&lt;/h3&gt;
                          &lt;br&gt;&lt;/br&gt;
  
                          {this.state.previousWords.length ? (
                              
                              &lt;div&gt;
                                  {this.state.previousWords.map( (value, index) =&gt; (
  
                                      &lt;div 
                                      key={index}
                                      className=&quot;row&quot;&gt;
  
                                          {value}
  
                                      &lt;/div&gt;
  
                                  ))}
                              &lt;/div&gt;
  
                          ):(&lt;&gt;&lt;/&gt;)}
                      &lt;/div&gt;
  </code></pre>
  <p>Prior app with functioning .map statement:</p>
  <pre><code>{this.state.events.length ? (
                                          
                                          &lt;Dropdown.Menu&gt;
                                              {this.state.events.map(events =&gt; (
                                                  &lt;Dropdown.Item
                                                  key={events.event_id}
                                                  /* TODO: onClick() */
                                                  &gt;
                                                      {events.title}
                                                  &lt;/Dropdown.Item&gt;
                                                  ))}
                                          &lt;/Dropdown.Menu&gt;
  
                                      ) : (
  
                                          &lt;Dropdown.Menu&gt;
                                              &lt;Dropdown.Item&gt;No Events Available&lt;/Dropdown.Item&gt;
                                          &lt;/Dropdown.Menu&gt;
  
                                      )}
  </code></pre>
  <p>exact error</p>
  <pre><code> 325 | 
    326 | &lt;div className=&quot;col-3&quot;&gt;
    327 |     &lt;h3&gt;Previous words:&lt;/h3&gt;
  &gt; 328 |     &lt;br&gt;&lt;/br&gt;
        | ^  329 |     &lt;&gt;{console.log(this.state.previousWords)}&lt;/&gt;
    330 | 
    331 |     { this.state.previousWords.length ? (
  </code></pre>
  <p>Setting the state for previousWord:</p>
  <pre><code> if( this.loss() ) {
  
                                  let previousWords = [...this.state.previousWords];
                                  previousWords.push(this.state.apiWord);
                                  console.log(&quot;Loss: before state updated: this.state.previousWords: &quot;, this.state.previousWords);
                                  console.log(&quot;Loss: before state updated: let previousWords: &quot;, previousWords);
  
                                  
                                  this.setState({
                                      previousWords: this.state.apiWord,
                                      pageLock: true,
                                      losses: this.state.losses + 1,
                                  }, () =&gt; {
                                      console.log(&quot;Loss: after setState: this.state.previousWords: &quot;, this.state.previousWords);
  
                                      this.resetGame();
                                      setTimeout(() =&gt; {
  
                                          // this.setWord();
                                      }, 5000);
                                  });
  </code></pre>
  <p>Console log where the state is being set. &quot;test&quot; was added to the initial state for testing purposes.</p>
  <pre><code>after API call: this.state.previousWords:  [&quot;test&quot;]
  App.js:209 Loss: before state updated: this.state.previousWords:  [&quot;test&quot;]
  App.js:210 Loss: before state updated: let previousWords:  (2) [&quot;test&quot;, &quot;unintermitting&quot;]
  </code></pre>