I have this React.JS code to return list of products:
This code return the Error:
TypeError: products.map is not a function
Code:
import { Route, Switch, useHistory } from 'react-router-dom';
import { CCol, CRow } from "@coreui/react";
import { useState, useEffect } from 'react';
import api from '../../../axrootpath';
function Products() {
const [products, setProducts] = useState([])
useEffect(() => {
const fetchProducts = async () => {
try {
const response = await api.get('api/products');
setProducts(response.data);
[b]{/*The following line returns the correct data set */}[/b]
console.log(products);
} catch (err) {
if (err.response) {
// Not in the 200 response range
console.log(err.response.data);
console.log(err.response.status);
console.log(err.response.headers);
} else {
console.log(`Error: ${err.message}`);
}
}
}
fetchProducts();
}, [])
return (
<div className="animated fadeIn">
<CRow>
<CCol xs={12}>
<table
id="productListTable"
className="table table-striped table-bproductd"
>
<thead>
<tr>
<th>Product Number</th>
<th>Description</th>
<th>Group</th>
<th>Account Number</th>
<th>Product Type</th>
<th>Unit</th>
<th>Packing Type</th>
</tr>
</thead>
<tbody>{products.map( (products) => {
return (
<tr key={products.prt_no}>
<td>{products.DSCRPT}</td>
<td>{products.ITEM_GROUP}</td>
<td>{products.ACC_GROUP}</td>
<td>{products.MATERIAL}</td>
<td>{products.UI}</td>
<td>{products.PU}</td>
</tr>
);
})}</tbody>
</table>
</CCol>
</CRow>
</div>
);
}
export default Products;
This code return the Error:
TypeError: products.map is not a function