I'm trying to make a Menu list with Menu items based on the number of the stock that in the object I made , so if stock in the object is 5 , then I want the menu to give me a loop from 1 to 5 for the user to choose
const productDetails = {
title : "product title",
stock : "5"
}
for (var i = 1; i <= productDetails.stock; i++) {
console.log(i)
}
<MenuList>
<MenuItem>{i}</MenuItem>
</MenuList>
You can do this using create an array of empty strings and then map over array to get the number of MenuItem as there are in productDetails.stock.
I've used
indexaskeywhich is not recommended. You can use any key for each element.
const productDetails = {
title: "product title",
stock: "5"
};
return (
<MenuList>
{Array(+productDetails.stock)
.fill("")
.map((n, i) => {
return <MenuItem key={i}>{i + 1}</MenuItem>;
})}
</MenuList>
);