.map() is not a Function

Asked

Viewed 505 times

-1

I am developing an application in React.js and have to perform a JSON request. The variable I declared receives the object, but when it arrives at the function .map() to expose the desired content it issues the error.

index js.

import React, {Component} from 'react';
import api from './api.js';
import { List,  Ranking, Revenues, Tickets} from '../styles/style.js';
import { Col, Row  } from 'react-grid-system';

class Listagem extends Component{
  state = {
      resultados: [],

    }

    async componentDidMount() {
      const response = await api.get('');
      console.log(response.data)
      this.setState({ resultados: response.data });
    }
  render() {

    const {resultados} = this.state;
    console.log(resultados)
    return(
        <Ranking>
        <Col md={4}>
          <Revenues>
          <p className="revenues_title"> Ranking </p>
          <h3> Revenues </h3>
          <List>
            <Col md={6}>
            {console.log(resultados.summary)}
            <p><b>{resultados.map((resultado) => (
            <li> {resultado.revenues_ranking.store_name}
            </li>))}</b></p>
            </Col>
            <Col md={6}>
            <p> {resultados.map((resultado) => (
            <li> r$ {resultado.revenues_ranking.total}
            </li>))}</p>
            </Col>
          </List>

          </Revenues>
        </Col>
        <Col md={4}>
          <Tickets>
          <p className="tickets_title"> Ranking </p>
          <h3> Tickets </h3>
          <List>
            <Col md={6}>
            <p>{resultados.map((resultado) => (
            <li> {resultado.tickets_ranking.store_name}
            </li>  ))}</p>
            </Col>
            <Col md={6}>
            <p> {resultados.map((resultado) => (
            <li> {resultado.tickets_ranking.total}
            </li>  ))}</p>
            </Col>
          </List>
          </Tickets>
        </Col>


      </Ranking>






    );
  }
}

export default Listagem;

api.js

    import axios from 'axios';


const api = axios.create({
  baseURL: 'https://run.mocky.io/v3/fbb7ec01-1dab-4f90-9130-683f475d7d67',


});

export default api;

Package.json

{
  "name": "napp-dash",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "12.16.3",
    "react": "17.0.1"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "babel-preset-react": "^6.24.1",
    "colorize": "^0.1.0",
    "core-js": "^3.7.0",
    "express": "^4.17.1",
    "express-favicon": "^2.0.1",
    "path": "^0.12.7",
    "prettier": "^2.1.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-grid-system": "^7.1.1",
    "react-scripts": "^4.0.0",
    "styled-components": "^5.2.1",
    "styled-icons": "^10.22.0",
    "touch": "^3.1.0",
    "typescript": "^4.0.5",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "@types/styled-components": "^5.1.4",
    "babel-plugin-react-html-attrs": "^3.0.5",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.2.0"
  }
}
react babel

  • Could you add in your question the error message? It will get better to understand your problem and so we can help.

  • resultados is an object. To iterate with .map you have to do something like resultados.transactions.map, choosing which array you want to map.

1 answer

0

The function .map() does not work with objects, only with arrays. When it is an object, the way to use the .map() would be so:

Object.keys(data).map(item => {...});

Where data is the variable containing the object.

"The Object.Keys() method returns an array of enumerable properties of a given object, in the same order it is provided by a for...in loop (the difference being that a for-in loop enumerates properties that are in the prototype string)."

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Browser other questions tagged react babel

You are not signed in. Login or sign up in order to post.