Iterating over array inside object in JSX giving undefined

Question

I am fetching data from my API :

  fetch('/api/p/' + project_id).then(res => res.json())
            .then((project) => {
                console.log(project)
                this.setState({ project })
            }
            );

the project structur is like this :

{
 name: "project1",
comments: ["com1", "com2"]
}

now inside my return function, I need to Loop through all comments and render them sparetly each comment on a different row so I used this code:

this.state.project.comments.map((comment) => {
           return (
               <p><i class="fas fa-chevron-right"></i> { comment } </p>
          );
 });

I am getting this Error:

TypeError: Cannot read property 'map' of undefined

I tried map or forEach and for. and also I can't get its length because I get the same error.

but if I type this.state.project.comments I get all elements in one row without space like this comment1comment2comment3

dmitrydwhite · Accepted Answer · 2020-01-23 04:18:44Z

2

You're trying to .map on a value that's undefined. It's probably because this.state.project.comments isn't defined while you're fetching, but React is still trying to do the initial render.

Make sure you set an initial state somewhere, like

constructor() {
  super();

  this.state = { project: { comments: [] } };
}

Alternatively, you can give a default value right there when you call .map:

(this.state.project.comments || []).map((comment) => {

answered Jan 23, 2020 at 4:18

dmitrydwhite

8364 silver badges11 bronze badges

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

1 Comment

Ahmad Ali Over a year ago

thank u, this solved the problem .. I think it is being undefined for a bit only

Tim Ackroyd · Accepted Answer · 2020-01-23 03:45:46Z

2

I think you're mapping over the wrong this, this line: this.state.comments.map((comment) => { should be this.state.project.comments.map((comment) => {

answered Jan 23, 2020 at 3:45

Tim Ackroyd

6359 silver badges25 bronze badges

1 Comment

Ahmad Ali Over a year ago

I fixed , not like that

Ankygurjar · Accepted Answer · 2020-01-23 03:52:31Z

0

What I can see from your code is that you are mapping the 'comments' but you are updating the project and that too you have to like

this.setState({
  project: res.data
})

and for mapping the data

this.state.project.map((project)=>{
   return (
               <p><i class="fas fa-chevron-right"></i> { project.comments } </p>
          );
})

answered Jan 23, 2020 at 3:52

Ankygurjar

1151 silver badge2 bronze badges

1 Comment

Ahmad Ali Over a year ago

project is an object, not array

Collectives™ on Stack Overflow

Iterating over array inside object in JSX giving undefined

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related