7 replies

Cannot display table using React

Hi,
I am trying to display a simple table but it is showing me error. Been stuck on this for two weeks.
Here is my code on codesandbox: https://codesandbox.io/s/angry-gauss-lvsrn3?file=/src/App.js

Embedding it here too:

import "./styles.css";

export default function App() {
  const products = ["A", "B", "C"];
  const counts = [3, 4, 6];

  let userArranged = [];
  for (let i = 0; i < products.length; i++) {
    userArranged[i] = { product: products[i], counts: counts[i] };
  }

  return (
    <div className="cart-table">
      <div className="heading-cart">Your cart:</div>
      <div className="header-cart">
        <div className="table-header-cell">Product</div>
        <div className="table-header-cell">Count</div>
      </div>
      <div className="cart-products">
        {userArranged[0].map((productArray) => (
          <div className="actual-cart">
            {productArray.map((prod) => (
              <div className="table-body-cell">{prod}</div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

import "./styles.css";

export default function App() {
  const products = ["A", "B", "C"];
  const counts = [3, 4, 6];

  let userArranged = [];
  for (let i = 0; i < products.length; i++) {
    userArranged[i] = { product: products[i], counts: counts[i] };
  }

  return (
    <div className="cart-table">
      <div className="heading-cart">Your cart:</div>
      <div className="header-cart">
        <div className="table-header-cell">Product</div>
        <div className="table-header-cell">Count</div>
      </div>
      <div className="cart-products">
        {userArranged[0].map((productArray) => (
          <div className="actual-cart">
            {productArray.map((prod) => (
              <div className="table-body-cell">{prod}</div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

The error:

userArranged[0].map is not a function

userArranged[0].map is not a function

Can someone help me out please?

CodeSandbox

angry-gauss-lvsrn3 - CodeSandbox

angry-gauss-lvsrn3 using react, react-dom, react-scripts

Cannot display table using React

Similar Threads