TypeError: language.map is not a function when getting data using axios-CodePudding

This is my component here I'm using MUI for table. I'm getting data from API and I also use map method to get my data but I'm getting error that says:

TypeError: language.map is not a function

But when put language in square it does not error but also not show any data on UI according to me my code is correct can anyone help me.

Language.js

import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import axios from "axios";
import { useState, useEffect } from "react";

const Languages = () => {
const [language, setLanguage] = useState([]);

useEffect(() => {
axios
  .get(
    "https://omxdgcc23c.execute-api.ap-south-1.amazonaws.com/dev/api/misc/languages? 
 userId=0x60588910"
  )
  .then((res) => {
    console.log(res.data);
    setLanguage(res.data);
  })
  .catch((err) => {
    console.log(err);
  });
 }, []);

 return (
<div>
  <h1>Languages</h1>

  <TableContainer component={Paper}>
    <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
      <TableHead>
        <TableRow>
          <TableCell>Id</TableCell>
          <TableCell align="right">English Text</TableCell>
          <TableCell align="right"> Text</TableCell>
          <TableCell align="right">Category</TableCell>
          <TableCell align="right">Order Index</TableCell>
          <TableCell align="right">Language Code</TableCell>
          <TableCell align="right">Created Time</TableCell>
          <TableCell align="right">Updated Time</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {language.map((languages) => {
          return (
            <TableRow key={languages.id}>
              <TableCell component="th" scope="row">
                {languages.uid}
              </TableCell>
              <TableCell align="right">{languages.engText}</TableCell>
              <TableCell align="right">{languages.text}</TableCell>
              <TableCell align="right">{languages.category}</TableCell>
              <TableCell align="right">{languages.index}</TableCell>
              <TableCell align="right">{languages.code}</TableCell>
              <TableCell align="right">{languages.createdAt}</TableCell>
              <TableCell align="right">{languages.updatedAt}</TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  </TableContainer>
</div>
 );
 };
  export default Languages;

CodePudding user response：

See the axios API here, the fetched data is also stored in the data property, so you have to access it like this:

axios.get('...').then(res => setLanguage(res.data.data));

CodePudding user response：

Check the length of language state, if it is greater than 0 after only you can map the language array,

Kindly, check with below code,

{ language && language.length > 0 && language.map((languages) => {
          return (
            <TableRow key={languages.id}>
              <TableCell component="th" scope="row">
                {languages.uid}
              </TableCell>
              <TableCell align="right">{languages.engText}</TableCell>
              <TableCell align="right">{languages.text}</TableCell>
              <TableCell align="right">{languages.category}</TableCell>
              <TableCell align="right">{languages.index}</TableCell>
              <TableCell align="right">{languages.code}</TableCell>
              <TableCell align="right">{languages.createdAt}</TableCell>
              <TableCell align="right">{languages.updatedAt}</TableCell>
            </TableRow>
          );
 })}

CodePudding user response：

The api response is of the format:

{
  "statusCode": 200,
  "data": [
    {...},
    {...} 
  ]
}

So when setting languages you need to save the data property of the response's data object. setLanguage(_.get(res, 'data.data', [])); Then, languages will always be a list, and you won't need to check it throughout the rest of your function.

You may need to check the response in your useEffect block if you want to do some error handling against a bad api response. But that's now in one place rather than throughout the rest of the function.