score:1

Accepted answer

dataele is undefined in the first render (and any subsequent renders before it is fetched). you also don't destructure it correctly in your render function. i think you likely meant to destructure descriptions instead.

import react, { component } from "react";
import axios from "axios";

class abc extends component {
  constructor(props) {
    super(props);
    this.state = { 
      descriptions: [],
     };
  }
  componentdidmount() {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        this.setstate({ descriptions: response.data });
        // if (response.data) {
        //   var rdata = response.data;
        //   for (var r = 0; r < rdata.length; r++) {
        //     if (r === 0) {
        //       // console.log(rdata[r]);
        //       // const {rdata} this.dataele = rdata[r]
        //       console.log(this.dataele.name);
        //     }
        //   }
        // }
      })
      .catch(error => {
        console.log(error);
      });
  }
  render() {
    const { descriptions } = this.state;

    return (
      <div>
        // {descriptions.map((description, index) => (
        //   <p key={index}>{description.description}</p> // response data objects don't have a description property!
        // ))}
        {descriptions[1] && descriptions[1].name}
      </div>
    );
  }
}

export default abc;

edit white-sky-plien

also, the response data shape doesn't have a description property on it, but tbh i'm not really sure what you're even trying to do with the for-loop, it throws an error.

score:0

please try that:

class abc extends component {
  constructor(props) {
    super(props);
    this.state = {
   descriptions: [] ;
  }
}
  componentdidmount() {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        this.setstate({ descriptions: response.data });

      })
      .catch(error => {
        console.log(error);
      });
  }

//for mapping**

return (
      <div>
        {this.sate.descriptions.map((description, index) => (
          <p key={index}>{description.description}</p>
        ))}
      </div>
    );
  }
}

score:1

quite a few problems in your code.

presumably you intended:

const { dataele } = this.setstate;

to be

const { descriptions = [] } = this.state;

Related Query

More Query from same tag