I am new to react and was trying to use a map function inside jsx to render an array. However nothing gets rendered inside the loop .
I am passing data to my child component like this:
{showMaterialConfirmModal && (
<MaterialModalConfirm
closeModal={setshowMaterialConfirmModal}
orderList={orderListE}
itemList={itemListE}
errorList={errorListE}
title="Success"
/>
)}
and inside the child component I am calling the map function like this:
<Card>
<GridContainer>
<GridItem xs={12}>Design Successful for: 0</GridItem>
<h5>Order:{props.orderList[0]}</h5>
{props.orderList.map((order, i) => {
<div>
{order}
<h1>Hi</h1>
{/* <GridItem xs={12}>
order/item no {order[i]}/{props.itemList[i]} due to{" "}
{props.errorList[i]}
</GridItem> */}
</div>;
})}
</GridContainer>
</Card>
The data in orderList is coming in the tag however nothing gets printed which is inside the loop.
I have checked various documents to run the map function however I am at a loss as to why nothing is getting printed .
Please help
I think you are missing a return here:
{props.orderList.map((order, i) => {
return (
<div>
{order}
<h1>Hi</h1>
</div>);
})}
or
{props.orderList.map((order, i) => (
<div>
{order}
<h1>Hi</h1>
</div>
))
}