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

Replace (order, i) => { ... } with (order, i) => ( ... ) — Phil
– Phil, Commented Jan 7, 2022 at 3:40

Hanchen Jiang · Accepted Answer · 2022-01-07 03:53:17Z

3

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

edited Jan 7, 2022 at 3:53

answered Jan 7, 2022 at 3:39

Hanchen Jiang

2,6702 gold badges12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sambit Over a year ago

I am using it inside the the jsx should I use return there?

Hanchen Jiang Over a year ago

Yeah it's how the map function works. It takes a function that transforms each element in the input using the function passed to map, which means the function passed to map needs to return something. Otherwise every element in the input gets transformed(mapped) into nothing. Or you can use the syntax @Phil commented, which is equivalent to what I wrote above.

Collectives™ on Stack Overflow

map function not rendering in react jsx

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related