getting empty array data after mapping the data in table

Question

Basically I am trying to get the data from axios and then mapping the data into material ui table but the only issue is getting I am map undefined in console I am getting empty array

export default function BasicTable() {
  const classes = useStyles();
  const [form, setForm] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:8080/getForm")
      .then((res) => setForm(res.data.form));
    
  }, []);
 
  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell> Bil</TableCell>
            <TableCell align="right">Sales Dist.</TableCell>
            <TableCell align="right">Sales Office&nbsp;(g)</TableCell>
           
          </TableRow>
        </TableHead>
        <TableBody>
          {form.map((p, index) => {
            return (
              <TableRow key={index}>
                <StyledTableCell align="right">{p.sale}</StyledTableCell>
                <StyledTableCell align="right">{p.district}</StyledTableCell>
                <StyledTableCell align="right">{p.billing}</StyledTableCell>
                
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Answer 1

using async and await its works fine generally when we call get request we should handle await for getting all data here is my code calling get request.

 const API = "http://localhost:8080/getForm";
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(API);

      setForm(result.data);
    };
    fetchData();
  }, []);