CODEWITHSUNDEEP
javascriptreactjsreact-redux
SANDEEP
SANDEEP

Reputation: 1082

getting error this.state.datas.map is not a function

I am a beginner in the react application development I am creating one component and calling API to display data on UI. I am getting data from API correctly on console but when I am rendering this data using map method in render then getting the this.state.datas.map is not a function error on the browser can someone tell what wrong is doing

Thanks 

    import React, { Component } from 'react';
    import './App.css';

 class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      datas: []
    };
  }

  componentDidMount() {
    fetch('https://api.inquickerstaging.com/v3/winter.inquickerstaging.com/services')
    .then(res => res.json())
    .then((data) => {
      this.setState({ datas: data })
      //console.log(this.state.datas)
    })
    .catch(console.log)

  }

  render() {

    return (
        <ul>
            {this.state.datas.map((book) => (
                <li key={book.id}>{book.type}</li>
            ))}
        </ul>
    )
}
}
export default App;

Upvotes: 0

Views: 47

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281666

The data object that you receive from the api is an object with keys data and meta, you need to store data.data in state

import React, { Component } from 'react';
    import './App.css';

 class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      datas: []
    };
  }

  componentDidMount() {
    fetch('https://api.inquickerstaging.com/v3/winter.inquickerstaging.com/services')
    .then(res => res.json())
    .then((data) => {
      this.setState({ datas: data.data })
    })
    .catch(console.log)

  }

  render() {

    return (
        <ul>
            {this.state.datas.map((book) => (
                <li key={book.id}>{book.type}</li>
            ))}
        </ul>
    )
}
}
export default App;

Upvotes: 2

Related Questions