Is there a way where I could put a line break for each data it displays?

Question

I have this array and I can already display it on the screen. I'm wondering if I can put a line break for each of the data it displays.

{
      name: "cartItems",
      label: "Product Name",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          // console.log(value, "cartItems");
          return value.map(
            (value) =>
              value.name +
              " (" +
              value.color +
              ") - " +
              " Qty:" +
              value.quantity +
              ","
          );
        }
      }
    }

As of now, it displays in one line like this:

Item name (item color) - Qty: 1 Item name (item color) - Qty: 2 Item name (item color) - Qty: 2

I wanted to somehow display it like this:

Item name (item color) - Qty: 1
Item name (item color) - Qty: 2
Item name (item color) - Qty: 2

Is this possible?

Answer 1

Try to add \n

          return value.map(
            (value) =>
              value.name +
              " (" +
              value.color +
              ") - " +
              " Qty:" +
              value.quantity +
              "," + 
              "\n"
          );