Type error: Cannot read property 'map' of undefined

Question

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 { dataEle } = this.setState;

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

export default Abc;

Answer 1

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

Answer 2

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;

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.

Answer 3

Quite a few problems in your code.

Presumably you intended:

const { dataEle } = this.setState;

to be

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