React JS: Getting [object object] When Concatenating Object Element With String

Question

Im defining row content in React Table, when type the element variable alone it will print correctly, but when I try to concatenate it with other variable I get [Object Object] instead

the Object:

// Icons object
const typeIcons = {
  DINEIN:  <FlatwareIcon color="secondary" />  ,
  DELIVERY: <DeliveryDiningIcon color="secondary" />,
  TAKEAWAY: <RoomServiceIcon  color="success"/>
}

When using object element with type 'DINEIN' for example, it works perfectly :

row2: typeIcons[item.order_type],

and gives the required icon, But when concatenating with other variable, i.e.

row2: typeIcons[item.order_type] + item.order_type,

the outcome will be: [Object Object]DINEIN Any explanation ? Thanks in advance for your kind help.

What do you expect when attempting to concatenate a React component and the string? Should the string be rendered after the React component? — Terry
– Terry, Commented Feb 13, 2022 at 22:09

valerii15298 · Accepted Answer · 2022-02-13 21:55:42Z

4

typeIcons[item.order_type] is object(React component) while item.order_type is a string. You cannot concatenate string with object. I assume value under row2 must contain a React component, then you can try something like this:

row2: <>{typeIcons[item.order_type]} {item.order_type}</>,

answered Feb 13, 2022 at 21:55

valerii15298

9016 silver badges23 bronze badges

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

1 Comment

Hobs Over a year ago

Thanks alot, that works just fine.. I was missing the point where react Component object should not be treated as object member. PS. I am not able to accept or upvote because of my account limitation, but upvoted anyhow.

Collectives™ on Stack Overflow

React JS: Getting [object object] When Concatenating Object Element With String

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related