Axios giving error on get request in react js

Question

I have been trying to get data from the api using axios get request but it keeps on giving me error. The error is TypeError: this.setstate is not a function i have seen multiple queries about it and almost all of them had done it this way but i cant figure out what iam doing wrong.

My code for axios get

import React, { Component, Fragment } from 'react';
import axios from 'axios'

class Questionare extends Component {
    constructor(props) {
        super(props);
        this.state = {  
          items: [],

    }
} 

componentDidMount() {
  axios.get('http://leaty-dev.azurewebsites.net/api/services/app/PersonalityQuestionerCategory/GetAllPersonalityQuestionerCategory')
  .then(response => {
      console.log(response);
      this.setstate({items: response.data})
  })
  .catch(error => {
    console.log(error);
  });
}

    render() { 

       return (
          <ul>
            {this.state.items.map(item=>(
             <li>{item.pqcDetail}</li>
            ))}
          </ul>
       )
    }

}

export default Questionare;

My mistke has been corrected it was camel case mistake but i have another error TypeError: this.state.items.map is not a function — Abdul Rauf
– Abdul Rauf, Commented Jan 10, 2020 at 6:24

akhtarvahid · Accepted Answer · 2020-01-10 06:37:04Z

2

It's camel case setState() not setstate()

corrected

this.setState({items: response.data})

Improved complete code ---Live https://74u3w.csb.app/

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

class Questionare extends Component {
  state = {
      items: []
    };
  componentDidMount() {
    axios
      .get(
        "https://cors-anywhere.herokuapp.com/http://leaty-dev.azurewebsites.net/api/services/app/PersonalityQuestionerCategory/GetAllPersonalityQuestionerCategory"
      )
      .then(response => {
        this.setState({ items: response.data.result.items });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    const { items } = this.state;
    return (
      <ul>
        {items.map(item => (
          <li>{item.pqcDetail}</li>
        ))}
      </ul>
    );
  }
}

edited Jan 10, 2020 at 6:37

answered Jan 10, 2020 at 6:15

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

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

8 Comments

Abdul Rauf Over a year ago

Thank you so much it worked but i have another problem

Abdul Rauf Over a year ago

TypeError: this.state.items.map is not a function

akhtarvahid Over a year ago

@AbdulRauf can you show your json response data sample?. is it array or object

Abdul Rauf Over a year ago

its an array of 7 items

Abdul Rauf Over a year ago

Thank you so much for your help. @VahidAkhtar

|

Collectives™ on Stack Overflow

Axios giving error on get request in react js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related