map function not rendering in react jsx

Question

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

Answer 1

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>
  ))
}