Handling data from Async requests in React JS

Question

I have a class component, where I am getting data from async request in its local props. This data is in form of array, which I loop through and display some list elements. For the first time component renders, I receive empty array and then populated array from server. Next time component renders, I receive empty array again, Which means data in local props is null now, which makes sense. Any explanations how to deal with that, so I have populated array.

See code below:

const {List} = this.props; //data in local props of a component
<ListGroup>
    {
        List.map((f, index) => {
            return (
                <ListGroup.Item 
                    action
                    href="" 
                    key={f.get('ID')}
                    value = {f.get('ID')}
                    onClick={this.handleClick}
                >
                    {f.get('NAME')}
                </ListGroup.Item>
            )
        })
    }
</ListGroup>

Then I have some button to switch back forth between two components. When I want to swtich to this list the local data in props is undefined or I get error says "TypeError: Cannot read property 'map' of undefined". Hope it is enough, not sure how I can show complete code here.

What version of React are you using? And how are you managing state? — Jonathan Rys
– Jonathan Rys, Commented Nov 14, 2019 at 12:29

Raja Sekar · Accepted Answer · 2019-11-14 12:29:02Z

1

You can do empty check, Like list is available and list length is not zero.

 <ListGroup>
                  {List && List.length && List.map((f, index) => {
                      return (<ListGroup.Item 
                              action href="" 
                              key={f.get('ID')}
                              value = {f.get('ID')}
                              onClick={this.handleClick}
                              >
                              {f.get('NAME')}
                              </ListGroup.Item>
                              )
                  })}
                  </ListGroup>

answered Nov 14, 2019 at 12:29

Raja Sekar

2,14017 silver badges23 bronze badges

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

2 Comments

Joesphine Over a year ago

Ok it makes sense to see if list is empty or not. But I want to know that data in local props i.e. List get empty, how can I deal with that?

Raja Sekar Over a year ago

If array is empty, what you wanted to do?

Collectives™ on Stack Overflow

Handling data from Async requests in React JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related