Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

318
Vistas
TypeError: this.state.data.map in reactjs
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoaded: false,
    };
  }

  componentDidMount() {
    fetch("https://reqres.in/api/users?page=2")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          isLoaded: true,
          data: json,
 
        });
      });
  }

  render() {

var { isLoaded, data }= this.state;

if(!isLoaded){
  return<div>Is isLoaded</div>
}

else{

    return (
      <div>
        <ul>
          {() =>
            this.state.data.map((data, index) => (
              <li key={index}>Email: {data.email}</li>
            ))
          }
          ;
        </ul>
        
      </div>
    );
  }
}
}

export default Home;

Hii All , I know this question is asked many times but I cant figure it out I'am getting the error. I have checked for all the questions similar to this but haven't found specific solution if I use another link i.e, "https://jsonplaceholder.typicode.com/users" this one the code works fine .

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

The returned data from https://reqres.in/api/users?page=2 is not an array, but an object with a data property containing what you are looking for (an array). The result of the request is :

{"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"},{"id":3,"email":"emma.wong@reqres.in","first_name":"Emma","last_name":"Wong","avatar":"https://reqres.in/img/faces/3-image.jpg"},{"id":4,"email":"eve.holt@reqres.in","first_name":"Eve","last_name":"Holt","avatar":"https://reqres.in/img/faces/4-image.jpg"},{"id":5,"email":"charles.morris@reqres.in","first_name":"Charles","last_name":"Morris","avatar":"https://reqres.in/img/faces/5-image.jpg"},{"id":6,"email":"tracey.ramos@reqres.in","first_name":"Tracey","last_name":"Ramos","avatar":"https://reqres.in/img/faces/6-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}

So you cannot use map function, which is from the Array prototype, on the result of your request. You must access the data property first :

this.state.data.data.map((data, index) => ( // note the double data
  <li key={index}>Email: {data.email}</li>
))

You could also assign json.data to the state.data to avoid the ugly .data.data :

this.setState({
  isLoaded: true,
  data: json.data, // note the .data
});
about 4 years ago · Juan Pablo Isaza Denunciar

0

I don't see any error, it's working just fine.

Output:

enter image description here

Working Example: StackBlitz

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoaded: false,
    };
  }

  componentDidMount() {
    fetch('https://reqres.in/api/users?page=2')
      .then((res) => res.json())
      .then((json) => {
        console.log(json.data);
        this.setState({
          isLoaded: true,
          data: json.data,
          email: null,
        });
      });
  }

  render() {
    var { isLoaded, data } = this.state;

    if (!isLoaded) {
      return <div>Is isLoaded</div>;
    } else {
      return (
        <div>
          <div className="contents home">
            <img
              src="https://trucard.io/india/wp-content/uploads/2021/08/2021-June-TruCard-Logo.png
"
              width={50}
              alt="img"
              className="trucard-img"
            />
          </div>
          <div className="button">
            <button className="button-button">Load list</button>
          </div>
          <ul>
            {this.state.data?.map((data, index) => (
              <li key={index}>Email: {data.email}</li>
            ))}
            ;
          </ul>
        </div>
      );
    }
  }
}

export default App;

about 4 years ago · Juan Pablo Isaza Denunciar

0

I think the problem is in brackets around your .map() method. Please try this

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoaded: false,
    };
  }

  componentDidMount() {
    fetch("https://reqres.in/api/users?page=2")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          data: json,
        });
      });
  }

  render() {
    const { isLoaded, data } = this.state;

    if (!isLoaded) {
      return <div>Is isLoaded</div>;
    } else {
      return (
        <div>
          <ul>
            {data?.map((data, index) => {
              return <li key={index}>Email: {data.email}</li>;
            })}
          </ul>
        </div>
      );
    }
  }
}

export default Home;
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda