Show array data in Table rows in ReactJS

Question

How can I output that productName inside that return? The items are from the selected cart items. The const order (function) does show in the console, but I can't get it to show inside the return of render.

const mapState = ({ user }) => ({
  currentUser: user.currentUser,
});

const mapCartItems = createStructuredSelector({
  items: selectCartItems,
});

const CheckingOut = (product) => {
  const { total, cartCount, items } = useSelector(mapCartItems);
    const order = {
    orderItems: items.map((item) => {
      const { productName, qty} = item;
      return {
        productName,
      };
      console.log(item.productName); // this one is showing in the console
    }),
  };

  return (
    <div>
      <Container fixed>
          <table >
            <tr>
              <td>Name : </td> // like show the items here
              <td></td>
            </tr>
            <br></br>
            <tr>
              <td>
                <PaymentIcon
                  style={{ marginRight: "1rem", color: " #e31837" }}
                />
                Total Price:
              </td>
              <td>₱{total}.00</td>
            </tr>
          </table>
        //just other codes for submit 
      </Container>
    </div>
  );
};

export default CheckingOut;

@AjeetShah not yet, I could see the products in the console. The return part is still the problem — JS3
– JS3, Commented Apr 6, 2021 at 1:33
@AjeetShah I'm sorry, i'm just new to SO, you mean, I should edit the post? — JS3
– JS3, Commented Apr 6, 2021 at 4:44

Ajeet Shah · Accepted Answer · 2021-04-06 03:24:21Z

2

Assuming items is an array similar to:

[
  { ID: 1, productName: 'p1', qty: 10 },
  { ID: 2, productName: 'p2', qty: 15 },
]

You can show productName and qty of each item in this array in <tr> and <td> of a table as:

{items.map((item) => (
    <tr key={item.ID}>
        <td>Name: {item.productName}</td>
        <td>{item.qty}</td>
    </tr>
))}

This will work even when items is empty array i.e. []. In case, it is null or undefined, you may do optional chaining.

It will show something like this in the table at UI:


Name: p1	10
Name: p2	15

PS: Above solution doesn't really require a separate function order as shown in your question.

edited Apr 6, 2021 at 3:24

answered Apr 6, 2021 at 3:17

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

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

Comments

Aga · Accepted Answer · 2021-04-05 13:47:01Z

2

const order = (product) => {
  const order = {
    orderItems: items.map((item) => {
      const { productName, qty} = item;
      return {
        productName,
      };
    }),
  };

  order.orderItems.forEach((item) => console.log(item.productName)) // will log all productName
return order.orderItems
}

Function order will return order.orderItems which has array of objects. For example:

order :{
  orderItems: [
    {
      productName: 'car',
    },
    {
      productName: 'bike',
    }
  ]
}

To access each of product name you have to iterate throught Array nested in order.orderItems

order(product).forEach((item) => {
  console.log(item.productName) // car, bike
});

edited Apr 5, 2021 at 13:47

answered Apr 5, 2021 at 13:34

Aga

1,4441 gold badge18 silver badges22 bronze badges

Comments

Ezequiel S. Sandoval · Accepted Answer · 2021-04-05 15:01:51Z

1

EDITED

// WHITHOUT STATE
const order = (product) => {
  const order = {
    orderItems: items.map((item) => {
      const { productName, qty} = item;
      return {
        productName,
      };
    })
  };
  return order; // Add this line to return your order object
};

// WITH STATE
const [myOrders, setMyOrders] = useState({});
const order = (product) => {
  setMyOrders({
    orderItems: items.map((item) => {
      const { productName, qty} = item;
      return {
        productName,
      };
    })
  });
  return //some layout;
};

Then in the return you can access like this:

// WITHOUT STATE 
return order().orderItems.map(item =>
  whatever you want to do with item.productName...
);

// WITH STATE
return myOrders.orderItems.map(item =>
  whatever code you want to add...
);

edited Apr 5, 2021 at 15:01

answered Apr 5, 2021 at 14:48

Ezequiel S. Sandoval

1701 gold badge2 silver badges13 bronze badges

2 Comments

JS3 Over a year ago

what if I already have existing codes in the return?like i've got a div inside there with some layouts

Ezequiel S. Sandoval Over a year ago

Then you can useState to set your orders and access them easily... something like const [myOrders, setMyOrders] = useState({});, check in my edited answer what it would be like

Sinan Yaman · Accepted Answer · 2021-04-05 17:29:17Z

1

You can map over arrays and return each element of the array inside a jsx element. If you had an array:

const arr = [1,2,3,4,5]

You could map over them and return them as:

arr?.map(num => (<p> {num} </p>))

Likewise, you can do:

return(
  order?.orderItems?.map(item => (
    <p>{item.productName} </p>
  ))
)

edited Apr 5, 2021 at 17:29

answered Apr 5, 2021 at 13:30

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

5 Comments

Bram Vanroy Over a year ago

What does the question mark mean in this context? I only know it in ternary if-else conditions.

Aga Over a year ago

I guess it mean order && order.orderItems && order.orderItems.map(item => ... )

Sinan Yaman Over a year ago

Exactly as @Aga said. It doesn't procede if the preceding variable is falsy

Sinan Yaman Over a year ago

No? optional chaining is its name. I described what it does.

Sinan Yaman Over a year ago

Who are you talking to? OP?

Collectives™ on Stack Overflow

Show array data in Table rows in ReactJS

4 Answers 4

Comments

Comments

EDITED

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

EDITED

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related