Home / Questions / 140918
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-02-24 10:11:22 +0800 CST 2020-02-24 10:11:22 +0800 CST

this.state.users.map is not a function

  • 772

Trying to display data in a view in React Js, I have found an error that following the steps of the tutorial still persists:

this.state.users.map is not a function

The code is the following

import React, {Component} from 'react';
import {render} from 'react-dom';
import request from 'superagent';

class App extends Component{

    constructor(){
        super();
        this.state = {
            users: ""
        };
    }

    componentDidMount(){
        request.get('http://localhost:8080/api/usuarios')
        .end((err, res) => {
            const usuariosGet = JSON.parse(res.text).usuarios;
            this.setState({
                users: usuariosGet
            });
        });
    }

    render(){

        var mostrarUsuarios = this.state.users.map((usuario, i) => {
            return (<li key={i}>{usuario}</li>);
        });

        return(
            <div>                
                <h1>Hola Mundo React JS</h1>
                <ul>
                    {mostrarUsuarios}
                </ul>
            </div>
        )       
    }
}

export default App;

results

javascript

3 Answers

  1. Best Answer

    What happens is that when the component is mounted usersit is not an array but a string. When called render()for the first time it will try to execute a mapbut, since the strings do not contain such a method, it will fail. The solution should be enough to change your declaration in the constructor:

    this.state = {
    users: []
};

    EDIT

    Regarding the error you mention in the comment, it is because what you receive is structured like this:

    [
    { Nombre: 'Juan' },
    { Nombre: 'Isaac' }
]

    It is an array of objects with a property Nombre. The error is that you cannot render objects just like that, you must select some of their properties:

    var mostrarUsuarios = this.state.users.map((usuario, i) => {
    return (<li key={i}>{usuario.Nombre}</li>);
});
    • 4

  2. The same happens to me:

    
import React,{Component} from 'react';

class App extends Component {

  state = {

    empresas:[]

  }

  componentDidMount () { 

    fetch('http://localhost:3000/empresas.json')
    .then((respuesta) => respuesta.json())
    .then(empresas => this.setState({empresas}))

  }

  render(){

    return (

      <div>
        <h1>Mi select</h1>
        <ul>
          {this.state.empresas.map(empresa => (
            <li key={empresa.rut}>
              {empresa.razonsocial}
            </li>
          ))}
        </ul>
      </div>

    )

  }

}

export default App;
    • 2

  3. Query:

    has to be calledusers:[]

    Or it can be called something else, eg.empresas:[]

    • 1