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>

Answer 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>
  );
}

Answer 2

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>