JSX this.state.STATE.map is not a function

Question

Issue: this.state.previousWords.map() is nor recognized as a function

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 "TypeError: this.state.previousWords.map is not a function." Below is the code snippet where the error is happening.

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.

<div className="col-3">
                        <h3>Previous words:</h3>
                        <br></br>

                        {this.state.previousWords.length ? (
                            
                            <div>
                                {this.state.previousWords.map( (value, index) => (

                                    <div 
                                    key={index}
                                    className="row">

                                        {value}

                                    </div>

                                ))}
                            </div>

                        ):(<></>)}
                    </div>

Prior app with functioning .map statement:

{this.state.events.length ? (
                                        
                                        <Dropdown.Menu>
                                            {this.state.events.map(events => (
                                                <Dropdown.Item
                                                key={events.event_id}
                                                /* TODO: onClick() */
                                                >
                                                    {events.title}
                                                </Dropdown.Item>
                                                ))}
                                        </Dropdown.Menu>

                                    ) : (

                                        <Dropdown.Menu>
                                            <Dropdown.Item>No Events Available</Dropdown.Item>
                                        </Dropdown.Menu>

                                    )}

exact error

 325 | 
  326 | <div className="col-3">
  327 |     <h3>Previous words:</h3>
> 328 |     <br></br>
      | ^  329 |     <>{console.log(this.state.previousWords)}</>
  330 | 
  331 |     { this.state.previousWords.length ? (

Setting the state for previousWord:

 if( this.loss() ) {

                                let previousWords = [...this.state.previousWords];
                                previousWords.push(this.state.apiWord);
                                console.log("Loss: before state updated: this.state.previousWords: ", this.state.previousWords);
                                console.log("Loss: before state updated: let previousWords: ", previousWords);

                                
                                this.setState({
                                    previousWords: this.state.apiWord,
                                    pageLock: true,
                                    losses: this.state.losses + 1,
                                }, () => {
                                    console.log("Loss: after setState: this.state.previousWords: ", this.state.previousWords);

                                    this.resetGame();
                                    setTimeout(() => {

                                        // this.setWord();
                                    }, 5000);
                                });

Console log where the state is being set. "test" was added to the initial state for testing purposes.

after API call: this.state.previousWords:  ["test"]
App.js:209 Loss: before state updated: this.state.previousWords:  ["test"]
App.js:210 Loss: before state updated: let previousWords:  (2) ["test", "unintermitting"]

Answer 1

this.state.previousWords is not an Array that's why you're getting the error. Easiest way to prevent it - check if this.state.previousWords is an Array Array.isArray(this.state.previousWords) and only then use map .

Array.isArray(this.state.previousWords) && this.state.previousWords.length

Answer 2

It looks like you correctly build out the new array, but then do not use it to update state:

let previousWords = [...this.state.previousWords];
previousWords.push(this.state.apiWord);

this.setState({
  previousWords: this.state.apiWord, // Should be previousWords: previousWords
  pageLock: true,
  losses: this.state.losses + 1,
},