React basic api call issue

Question

I am trying basic react js api data display on to the DOM.

I am getting this error:

On the console I dont get any errors but it gives TypeError: Cannot read property 'map' of undefine error on the page.


class App extends React.Component {
  constructor(props)
  {
    super(props);
    this.state = {
     details: [],
     isLoaded: false
    }
   
  }
  
  componentDidMount()
  {
    fetch("https://dummy.restapiexample.com/api/v1/employees")
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          isLoaded: true,
          details: result.details
        })
      }
    )
  }

 
  render() {
    const { isLoaded, details} = this.state;

    if(!isLoaded)
    {
      return <div> Loading ...... </div> 
    }

    return (
    <ul>
      {details.map(detail => (
        <li key={detail.employee_name}> {detail.employee_name} </li>
      ))}
    </ul>
    );
  }
  
}

export default App;

details && details.map assuming details is really an array — EugenSunic
– EugenSunic, Commented Sep 6, 2020 at 20:29

Gabriele Petrioli · Accepted Answer · 2020-09-06 20:32:47Z

2

The endpoint you use returns data, not details.

So the

this.setState({
      isLoaded: true,
      details: result.details
    })

should really become

this.setState({
      isLoaded: true,
      details: result.data
    })

answered Sep 6, 2020 at 20:32

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

2 Comments

Rohan Over a year ago

Thanks alot, it fixed my error but why it should be data instead of details? or something else? is data predefined result-set from the fetch call?

Gabriele Petrioli Over a year ago

No, that is just the structure of the returned JSON from that specific API.

Abhishek Bhagate · Accepted Answer · 2020-09-06 20:36:11Z

1

Your code should work fine if the response you are setting to details is an array.In the fetch url you are trying to fetch from, the response doesn't have any details field. Change it to result.data and it should work fine.

Also Maybe try changing details.map(...) to details && details.map(....) This should solve the error if you are getting it due to delay in setting the result.data into details from the fetch. This change would also make sure that if details is undefined (as it currently is in your code), then the map function would never execute and you won't be thrown the error.

answered Sep 6, 2020 at 20:36

Abhishek Bhagate

5,8063 gold badges18 silver badges33 bronze badges

2 Comments

Rohan Over a year ago

why it should be data instead of details? or something else? is data predefined result-set from the fetch call?

Abhishek Bhagate Over a year ago

@Rohan Just enter the url - dummy.restapiexample.com/api/v1/employees on your browser and check the response object that you get. In that object, there only exists data as a key for response object and no details and hence...

Collectives™ on Stack Overflow

React basic api call issue

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related