CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-reduxaxios
Neha Sharma
Neha Sharma

Reputation: 471

Why this error arising? users.map is not a function

I am trying to render names from a API with Axios. Even I can see all data in console but unable to render as it shows error:

users.map is not a function

Below I'm sharing my code of the file. I'm quite new that might be the reason I'm unable to figure it out.

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import { Container, Table} from "react-bootstrap";
import axios from 'axios';

class App extends React.Component {
    state = {
        users: [],
    };

    componentDidMount () {
        axios.get('https://5w05g4ddb1.execute-api.ap-south-1.amazonaws.com/dev/profile/listAll')
            .then(response => {
                const users = response.data;
                this.setState({ users });
                console.log(this.state.users);
            })
    }

    render() {
        const { users } = this.state;
        return (
        <div className="App">
              <Container fluid>
                  <Table striped bordered hover size="sm">
                      <thead>
                      <tr>
                          <th><div id="">Image</div></th>
                          <th>Name</th>
                          <th>Gender</th>
                          <th>Age</th>
                          <th>Date</th>
                          <th>Status</th>
                      </tr>
                      </thead>
                      <tbody>

                      <tr>
                          { users.map(user => { return <td key={user.id}>{ user.name }</td> }) }

                      </tr>
                      </tbody>
                  </Table>
              </Container>
        </div>
      )
}
}

export default App;

Upvotes: 0

Views: 131

Answers (4)

rizesky
rizesky

Reputation: 444

There are 2 errors:

  1. the response from api is not a list but an object, u need to go to response.list to use the list from the response it should be
const users = response.data.list
  1. your
this.setState({users})

,you will need to change it to

this.setState({users:<VARIABLE_NAME_TO_HOLD_USER_DATA>})

even what you write is valid like in ES6, that is somehow a bad idea, it is not a clear what are you doing, just define what u want to copy to ur component state

Upvotes: -1

Nima Ka
Nima Ka

Reputation: 163

fast hack

{users.list.map(user => { return <td key={user.id}>{ user.name }</td> }) }

Upvotes: 0

Gabriel Petersson
Gabriel Petersson

Reputation: 10472

The response you are getting is not an array, but an object like this:

{"list":[{"id":"MnJJA0dbuw","name":"Anand Sharma","img":"https://incablet-tests.s3.ap-south-1.amazonaws.com/conference-content/photos/sponsors/Anand.jpeg","gender":"m","age":46,"date":"23/11/2019","status":"onboarded"}]}

You can access the array by replacing const users = response.data; with const users = response.data.list;

Upvotes: 1

Muhammad Ahmod
Muhammad Ahmod

Reputation: 709

In your axios get, in the “then” part change the line:

const users = response.data;

To:

const users = response.data.list;

Upvotes: 1

Related Questions