Iterate loop over state object with an array key in React

Question

I have a function getBar() returning an object like:

{
  foo: 'value',
  array: ['a', 'b', 'c']
}

Here's my React component calling the above function i.e. getBar():

class foo extends Component {

  state = {
    bar: {}
  };    
  componentDidMount(){
    this.setState({
      bar : getBar()
    });
  }
  render() {
    {this.state.bar.array.map((value, i) => <div class="row" key={i}>{value}</div>)}
  }
}

It always gives me Uncaught TypeError: Cannot read property 'map' of undefined error. Exploring similar questions, I came to know I will have to declare an empty state array which I did in different ways but none worked. Can anybody please give me an appropriate answer preferably with complete logic.

I tried another way of declaring the state array to a const in render() but didn't get successful results.

Phillip · Accepted Answer · 2017-02-06 22:00:32Z

2

Ok, so this is actually something to do with your component's lifecycle

The problem is that your render method runs before the componentDidMount method. So the first time your component renders your state looks like this:

{
  bar: {},
}

So no array property on bar, which means you cannot map over it (which is why you get errors 😣). Instead you could use the componentWillMount method, to set the state before the render method runs, or you could do a check on array being set before mapping over it.

answered Feb 6, 2017 at 22:00

Phillip

6,3033 gold badges26 silver badges36 bronze badges

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

1 Comment

Adil Over a year ago

Thanks a lot!! I was trying different tweaks since an hour but using componentWillMount worked flawlessly.

Collectives™ on Stack Overflow

Iterate loop over state object with an array key in React

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related