TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Question

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.

class PubSubTopics extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            pubsubtopics: ['one', 'two', 'three'],
        }
    }

    componentDidMount() {
        this.callBackEndAPI()
            .then(res =>
                this.setState({pubsubtopics: res.express}))
            .catch(err => console.log(err));
        console.log('after setting state');
        console.log(this.state.pubsubtopics);
    }


    callBackEndAPI = async () => {
        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(<li key={index}>{value}</li>)
        }
        return(
            <div>
                <ul>
                    {list}
                </ul>
                <button onDoubleClick={this.handleClick}/>
            </div>
        )
    }
}

Console log:

after setting state
index.js:21 (3) ["one", "two", "three"]
index.js:32 after API responded
index.js:33 (5) [{…}, {…}, {…}, {…}, {…}]

Any idea why it's saying this.state.pubsubtopics is undefined?

Answer 1

check all the brackets used in the code at specified line number.e.g.:
in my case this was throwing error -

const [query, setQuery] = useState['']

When i corrected this,

const [query, setQuery] = useState('')

This was working fine for me.
Please check if this fixes your problem.

Answer 2

If you have recently updated your MacOS and if this error shows up suddenly, it must be because MacOS Monterey is not listed in the list of OS.

Add this line to the top of index.js and then this error will be fixed.

const nameMap = new Map([
    [21, ['Monterey','12']],
    [20, ['Big Sur', '11']],
    [19, ['Catalina', '10.15']],
    [18, ['Mojave', '10.14']],
    [17, ['High Sierra', '10.13']],
    [16, ['Sierra', '10.12']],
    [15, ['El Capitan', '10.11']],
    [14, ['Yosemite', '10.10']],
    [13, ['Mavericks', '10.9']],
    [12, ['Mountain Lion', '10.8']],
    [11, ['Lion', '10.7']],
    [10, ['Snow Leopard', '10.6']],
    [9, ['Leopard', '10.5']],
    [8, ['Tiger', '10.4']],
    [7, ['Panther', '10.3']],
    [6, ['Jaguar', '10.2']],
    [5, ['Puma', '10.1']]
]);

Answer 3

You can't destruct in a for..of iteration over an array, because what you're trying to iterate isn't destructible. You're essentially trying to do this on each iteration

const [index, value] = this.state.pubsubtopics[0]
// this is equivalent to const [index, value] = "one", for example.

What you want to do is use this.state.pubsubtopics.entries(), which returns an array of key-value pairs. Here's an example:

const arr = ['a', 'b'];
// arr.entries() is [[0, 'a'], [1, 'b']]
for (const [index, element] of arr.entries()) {
    // const [index, element] = [0, 'a'] on 1st iteration, then [1, 'b'], etc. 
    console.log(index, element);
}

Answer 4

In my case, the error was happening simply because the array I was iterating over had undefined as it's value.