CODEWITHSUNDEEP
javascriptarraysreactjsapiaxios
Abdul Rauf
Abdul Rauf

Reputation: 100

Axios giving error on get request in react js

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;

Upvotes: 0

Views: 138

Answers (1)

akhtarvahid
akhtarvahid

Reputation: 9769

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>
    );
  }
}

Upvotes: 2

Related Questions