Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

React Problem

Status
Not open for further replies.

amrmnabil

MIS
Jun 2, 2017
10
EG
I have this React.JS code to return list of products:

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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top