Uncaught TypeError: this.state.data.map is not a function

Question

I am new to React, have seen some of the similar issues, but didn’t find why this happens. I am getting an “Uncaught TypeError: this.state.data.map is not a function”. Here

Answer 1

Your initial data state is String., String does not have method .map, you need change your initial state from '' to []

this.state = {  data: [] };

Answer 2

I have the same error in react-redux.

problem was when I add new product in add/product page and click on the back button then the component of the home page is showing this error

home_container.js:8 Uncaught TypeError: products.product.map is not a function

renderItems = (products) => (
            products.product ? 
            products.product.map(item => (
                <ProductItem {...item} key = { item._id } />
            ))
            : null
        )

solution

I am passing {} instead of [] from the node server

So, when you have this type of error in react-redux then first check what you are passing from the server into that field and also check reducers of that particular component.

Answer 3

If your data is a string type then instead you must use this.state.data.split('').map(ch=>{ console.log('Hello from map') })

Answer 4

First you must split data to an array, then you may use the map function. Instead of

 this.state.data.map

use

this.state.data.split('').map()

Answer 5

.map is not applicable to a String object. Consider changing 'data' to an array. .map is a method that calls a function on every element of an array.