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!