R
Reactiflux

react-forum

Cannot display table using React

MMeraj12/28/2022
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 Can someone help me out please?
Solution:
Message Not Public
Sign In & Join Server To View
Jump to solution
UUUnknown User12/28/2022
Message Not Public
Sign In & Join Server To View
Aaprillion12/28/2022
{ product: products[i], counts: counts[i] } is an Object and non-array objects don't have Array.prototype.map() you are not using counts in the returned value, so no idea what you are trying to achieve to help with a solution ¯\_(ツ)_/¯ for a general advice for debugging, I recommend to log any value that looks suspicious (when you believe it should be something, but the error message sounds like it's something else), e.g. console.log(userArranged[0])
MMeraj12/28/2022
Thanks for replying. I just want a table with Products and Counts as two columns with their respective values under them. Products Counts A 3 B 4 C 6 I also tried 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.
Solution
UUUnknown User12/28/2022
Message Not Public
Sign In & Join Server To View
MMeraj12/29/2022
Thank you so much. This did it. Much obliged!
UUUnknown User12/29/2022
Message Not Public
Sign In & Join Server To View

Looking for more? Join the community!