Getting a console error called "data.map" is not a function

Viewed 15

I am trying to build a table based of an Axios get call. And when I'm trying to create the rows for my table, I'm getting an error called "data.map is not a function".

Here's my Dashboard main function:

import axios from "axios"
import { useEffect, useState } from 'react';
import Navbar from "../components/tenantComponents/NavBar"
import Table from '../components/tenantComponents/Table'
export default function OwnerDashboard2(){
    const [ownerData, setTenantData] = useState([]) 
    const [dataTable, setDataTable] = useState([]);

    useEffect(() => {
        axios.get('https://t00axvabvb.execute-api.us-west-1.amazonaws.com/dev/propertiesOwner?owner_id=100-000003')
        .then(res => setDataTable(res.data))
        console.log(dataTable);
        axios.get('https://t00axvabvb.execute-api.us-west-1.amazonaws.com/dev/propertiesOwner?owner_id=100-000003')
        .then(res => setTenantData(res.data))
        .catch(err => console.log(err))
    });
          
    
    const column = [
        { heading: 'Addresses', value:'result.address'},
        { heading: 'Property Type', value:'result.property_type'},
        { heading: 'Rent', value:'result.listed_rent'},
      ]
    

     
    return(
        
        <div className="OwnerDashboard2">
            <div>
                {ownerData.length !== 0 && <h3 style={{paddingLeft: "7rem", paddingTop:"2rem"}}>{ownerData.result[0].owner[0].owner_first_name + " " +ownerData.result[0].owner[0].owner_last_name}</h3> }
                <h8 style={{paddingLeft: "7rem", paddingTop:"2rem"}}>Owner</h8>
                <Navbar/>
            </div>
            <div>
                <Table data={dataTable} column={column} />
            </div>
        </div>
    )
}

My Table Function:

import './table.css'

const Table = ({ data, column }) => {
  return (
    <table>
      <thead>
        <tr>
          {column.map((item, index) => <TableHeadItem item={item} />)}
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => <TableRow item={item} column={column} />)}
      </tbody>
    </table>
  )
}

const TableHeadItem = ({ item }) => <th>{item.heading}</th>
const TableRow = ({ item, column }) => (
  <tr>
    {column.map((columnItem, index) => {
    return <td>{item[`${columnItem.value}`]}</td>
    })}
  </tr>
)

export default Table

The issue is in the tbody with data.map but I'm not sure what's wrong as I define my TableRow. I would greatly appreciate any help!

0 Answers
Related