Data returned from axios returns undefined when trying to insert it into table in React

Question

Hello I am building an app that fetches data from an api and then I want to insert it into a Material UI Table in React

When I console.log the data returned from axios it works it shows me the json, but when I try to add it to the table it gives me undefined. Please help

This is the code:

import React from 'react';
import axios from 'axios';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { render } from '@testing-library/react';

const { Component } = require("react");
/*
function getData() {
// create a new XMLHttpRequest
var xhr = new XMLHttpRequest()

// get a callback when the server responds
xhr.addEventListener('load', () => {
  // update the state of the component with the result here
  console.log(xhr.responseText)
 
 
})
// open the request with the verb and the url
xhr.open('GET', 'http://localhost/spv/react-php/src/server.php')
// send the request
xhr.send()
 }
*/


 function axiosxxx() {
 axios.get(`http://localhost/spv/react-php/src/server.php`)
  .then(res => {
    let info = res.data;
    console.log(info.cnp);
    return this.info.cnp;
  })

  

 }




const useStyles = makeStyles({
table: {
  minWidth: 650,
},
});

function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}

const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];

function ListaMesaje() {


//getData();
axiosxxx();

const aaa = axiosxxx();


console.log("INFOOO: " + aaa);



const classes = useStyles();



return (
    <div>
        <h1>Lista Mesaje</h1>
  <TableContainer component={Paper}>
    <Table className={classes.table} aria-label="simple table">
      <TableHead>
        <TableRow>
          <TableCell>CIF</TableCell>
          <TableCell align="right">Data Creare</TableCell>
          <TableCell align="right">Detalii</TableCell>
          <TableCell align="right">ID</TableCell>
          <TableCell align="right">ID Solicitare</TableCell>
          <TableCell align="right">Tip</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {info.map((row) => (
          <TableRow key={row.mesaje.cif}>
            <TableCell component="th" scope="row">
              {row.mesaje.cif}
            </TableCell>
            <TableCell align="right">{row.mesaje.data_creare}</TableCell>
            <TableCell align="right">{row.mesaje.detalii}</TableCell>
            <TableCell align="right">{row.mesaje.id}</TableCell>
            <TableCell align="right">{row.mesaje.id_solicitare}</TableCell>
            <TableCell align="right">{row.mesaje.tip}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
  </div>
);

}

export default ListaMesaje;

The api returns the json in console log when i console.log it in axios and it works but when I try to console log const aaa it gives me undefined and the same with the table map.(info etc... it gives me undefined

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — ASDFGerte, Oct 29 '20 at 15:22

krimo · Answer 1 · 2020-10-29T15:36:55.563

use setState whe you get data from your aPi then

state = {
    data: [],
}

function axiosxxx() {
axios.get(`http://localhost/spv/react-php/src/server.php`)
.then(res => {
 setState({data:res.data})
let info = res.data;
console.log(info.cnp);
return this.info.cnp;
})


const data =this.state.data

 {data.map((row) => (
  <TableRow key={row.mesaje.cif}>
    <TableCell component="th" scope="row">
      {row.mesaje.cif}
    </TableCell>
    <TableCell align="right">{row.mesaje.data_creare}</TableCell>
    <TableCell align="right">{row.mesaje.detalii}</TableCell>
    <TableCell align="right">{row.mesaje.id}</TableCell>
    <TableCell align="right">{row.mesaje.id_solicitare}</TableCell>
    <TableCell align="right">{row.mesaje.tip}</TableCell>
  </TableRow>
))}

I changed info to aaa and it says : TypeError: Cannot read property 'map' of undefined — SerbanRamon, Oct 29 '20 at 15:30

Data returned from axios returns undefined when trying to insert it into table in React

1 Answers1