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.
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}</>,