react-forum
Root Question Message
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>
);
}
userArranged[0].map is not a function
{ product: products[i], counts: counts[i] }
is an Object and non-array objects don't have Array.prototype.map()
counts
in the returned value, so no idea what you are trying to achieve to help with a solution ¯\_(ツ)_/¯console.log(userArranged[0])
userArranged.push([products, counts])
to have a different array but it gave me two rows, first one filled with all products and second one with all counts.