How to insert array of data into table

Question

I have a table in frontend and need to put some data into the table. Below is what I am trying to achieve

____________________________________________________
| Product Name | Product Number | Product Location |
----------------------------------------------------
|       A      |       123      |      TEXAS       |
----------------------------------------------------
|       B      |       456      |      NEW YORK    |
----------------------------------------------------

However, I am keep getting like below table.

____________________________________________________
| Product Name | Product Number | Product Location |
----------------------------------------------------
|       A      |       123      |       TEXAS      |
                                       NEW YORK
----------------------------------------------------
|       B      |       456      |       TEXAS      |
                                       NEW YORK
----------------------------------------------------

Below is my code with JSX and render functions

    const getTheLocation = () => {
        return (
            productsHistoryLocation.map((productHistory) => (
                <p key={productHistory.product_id}>{productHistory.product_location}</p>
            ))
        )
    }

    const renderProducts = () => {
        return (
            productsData.map((product) => 
            (
                <tr key={product.product_number}>
                        <td>{products.bacs_unit}</td>
                        <td>{products.serial_number}</td>
                        <td>{getTheLocation()}</td>
                </tr>   
            ))
        )
    }
        <Table aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell><b>Product Name</b></TableCell>
                            <TableCell><b>Product Number</b></TableCell>
                            <TableCell><b>Product Location</b></TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {renderProducts()}
                    </TableBody>
             </Table>

You probably need to fetch getTheLocation method with some product-dependent variable. As per your code, it looks like getTheLocation will have elements for all the productHistoryLocation. If you can add some input data, it would be more clear. — Vir Gandhi
– Vir Gandhi, Commented Feb 8, 2021 at 6:33
You are showing all the rows with Product Location fetching the same data which is a collection i suppose, because your getTheLocation() function is using the map method. — b3lg1c4
– b3lg1c4, Commented Feb 8, 2021 at 6:37
Currently your renderProducts and getTheLocation are behaving as independent functions and as you have two locations, renderProducts is running getTheLocation for both of locations and thus the result. If the Location is somehow associated with the Product, you could pass in that associated index down to get location function and display only location associated to that particular product. — Raj
– Raj, Commented Feb 8, 2021 at 6:39

Praveen Nambiar · Accepted Answer · 2021-02-08 07:07:53Z

1

The problem lies with your function getTheLocation and possibly your data structure.

Change getTheLocation to

  const getTheLocation = (idx) => {
    const location = productsHistoryLocation.filter(
      (product) => product.product_id === idx
    );
    return <p key={idx}>{location[0].product_location}</p>;
  };

Check the working logic here:

Check the FULL CODE:

import "./styles.css";
import {
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableBody
} from "@material-ui/core";

export default function App() {
  const productsData = [
    {
      product_number: 1,
      bacs_unit: "A",
      serial_number: "123"
    },
    {
      product_number: 2,
      bacs_unit: "B",
      serial_number: "456"
    }
  ];

  const productsHistoryLocation = [
    {
      product_id: 1,
      product_location: "TEXAS"
    },
    {
      product_id: 2,
      product_location: "NEW YORK"
    }
  ];

  const getTheLocation = (idx) => {
    const location = productsHistoryLocation.filter(
      (product) => product.product_id === idx
    );
    return <p key={idx}>{location[0].product_location}</p>;
  };

  const renderProducts = () => {
    return productsData.map((product) => (
      <tr key={product.product_number}>
        <td>{product.bacs_unit}</td>
        <td>{product.serial_number}</td>
        <td>{getTheLocation(product.product_number)}</td>
      </tr>
    ));
  };

  return (
    <div className="App">
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>
              <b>Product Name</b>
            </TableCell>
            <TableCell>
              <b>Product Number</b>
            </TableCell>
            <TableCell>
              <b>Product Location</b>
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>{renderProducts()}</TableBody>
      </Table>
    </div>
  );
}

answered Feb 8, 2021 at 7:07

Praveen Nambiar

4,9022 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Henry Over a year ago

This code is working but when I refresh the page there is an error of TypeError: Cannot read property 'product_location' of undefined

Henry Over a year ago

It is weird. If I return <p>Texas</p> everything works fine but doesn't work when I return <p key={idx}>{location[0].product_location}</p>

Deep Patel · Accepted Answer · 2021-02-08 06:37:29Z

0

pass key as parameter to other and direct use that key to get location

const getTheLocation = (key) => {
        return (
                <p >{productsHistoryLocation[key].product_location}</p>
        )
    }

    const renderProducts = () => {
        return (
            productsData.map((product, key) => 
            (
                <tr key={product.product_number}>
                        <td>{products.bacs_unit}</td>
                        <td>{products.serial_number}</td>
                        <td>{getTheLocation(key)}</td>
                </tr>   
            ))
        )
    }
        <Table aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell><b>Product Name</b></TableCell>
                            <TableCell><b>Product Number</b></TableCell>
                            <TableCell><b>Product Location</b></TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {renderProducts()}
                    </TableBody>
             </Table>

answered Feb 8, 2021 at 6:37

Deep Patel

707 bronze badges

3 Comments

Henry Over a year ago

It worked at first but it says TypeError: Cannot read property 'product_location' of undefined as I reload the page

Henry Over a year ago

Maybe it is related to my other codes which fetches the data and useEffect...

Henry Over a year ago

I console logged key and productsHistoryLocation and commented out return statement and it is logging the data. However, when I put the return statement back it is getting a TypeError

Collectives™ on Stack Overflow

How to insert array of data into table

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related