Map function in react (err: TypeError: e.map is not a function)

Question

I want to render items from props, I can do it with initial state, but not with response from server. My render function :

 const { data } = this.props;
    return (
      <div >
          {data.map((item, index) =>
              <div key={index} className="row">
                  <span data = { data } className="number col-4 col-md-8">{item._id}</span>
                  <span data = { data } className="date col-4 col-md-2">{item.date}</span>
                  <span data = { data }  className="tag col-4 col-md-2">{item.tag}</span>
                  <div className="col-md-12 ">
                    {item.text}
                  </div>                
              </div>
          )}
      </div>
    )
  }

I get this mistake :

TypeError: e.map is not a function

response : Object {data: Array(12), status: 200, statusText: "OK", headers: Object, config: Object…}

Where's your call to the server? Where is e.map in your code? — Christopher Messer
– Christopher Messer, Commented Aug 20, 2017 at 22:30
Can you show how are you updating your data prop from the response? It looks like data becomes undefined, so I think you are overriding something, but I cannot tell until I see the code. — Carlos C
– Carlos C, Commented Aug 21, 2017 at 7:32

Elena · Accepted Answer · 2017-08-21 04:22:31Z

3

Had to change parent component change this:

  this.setState({
    data: response
  })

to

  this.setState({
    data: response.data
  })

I've tried to reach the data from the child component, but it din't work (probably because of the map function)

answered Aug 21, 2017 at 4:22

Elena

7493 gold badges9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steven Scaffidi · Accepted Answer · 2017-08-20 22:34:28Z

2

It looks like your response is just the raw response. If you're using fetch, this is what the promise chain should look like:

fetch(fromMySource).then(resp => resp.json()).then(data => doSomething(data));

It looks like you might be trying to use resp directly which would make your data array look like the response object you posted in your question.

answered Aug 20, 2017 at 22:34

Steven Scaffidi

2,3071 gold badge14 silver badges15 bronze badges

Comments

Smart Manoj · Accepted Answer · 2020-12-15 03:51:00Z

1

Just add these words to your map function, Because you need check if the array was existed then execute map function

const { data } = this.props;
    return (
      <div >
          {data && data.length && data.map((item, index) =>
              <div key={index} className="row">
                  <span data = { data } className="number col-4 col-md-8">{item._id}</span>
                  <span data = { data } className="date col-4 col-md-2">{item.date}</span>
                  <span data = { data }  className="tag col-4 col-md-2">{item.tag}</span>
                  <div className="col-md-12 ">
                    {item.text}
                  </div>                
              </div>
          )}
      </div>
    )
  }

edited Dec 15, 2020 at 3:51

Smart Manoj

6,0736 gold badges45 silver badges66 bronze badges

answered Aug 21, 2017 at 3:34

user5738822

1 Comment

Elena Over a year ago

looks like it renders while response doesn't exist yet, and doesn't rerenders after..

n30n0v · Accepted Answer · 2017-08-20 22:44:15Z

0

You can use default value of data, when response is pending. In this time data is not defined

const { data = [] } = this.props;

Or use condition in jsx:

render() {
   if (!data || !data.length) return null;
   ...
}

edited Aug 20, 2017 at 22:44

answered Aug 20, 2017 at 22:32

n30n0v

243 bronze badges

Collectives™ on Stack Overflow

Map function in react (err: TypeError: e.map is not a function)

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related