how to put two data in a title?

Question

I want to display a list of products that uses an API to retrieve the data.

the array I use to display data looks like this :

Array [
  Object {
    "amount": 2671.25,
    "balance": 0,
    "client_id": 1,
    "created_at": "2020-05-06T17:42:26Z",
    "discount": 0,
    "discount_type": 0,
    "id": 19,
    "items": Array [
      Object {
        "cost": 2400,
        "currency": "EUR",
        "description": "",
        "name": "Apple MacBook '' LED 500 Go SSD 32 Go",
        "product_id": 5,
        "quantity": 1,
        "tax_rate_id": 1,
      },
      Object {
        "cost": 54.25,
        "currency": "EUR",
        "description": "blablabla",
        "product_id": 2,
        "quantity": 5,
        "tax_rate_id": 4,
      },
    ],
    "po_number": "",
    "public_notes": "TEST 6 : Acomptes",
    "quote_date": "2020-05-06",
    "quote_number": "D0019",
    "quote_status": 40,
    "terms": "",
    "updated_at": "2020-05-06T18:08:06Z",
  },

It works, it's great. But I would like to improve the display. For example, when I unroll my lilste to get the detail, I have the price.

<List.Item title={item.amount}/>

Ok, it works, cool, but I would like to add the currency (€ or other) How can I do it? I tried this but it doesn't work:

<List.Item title={item.amount}{item.currency}/>

<List.Item title={item.amount} + {item.currency}/>

<List.Item title={item.amount} + '€'/>

<List.Item title='{item.amount} + €'/>

Answer 1

Use Template Literals

Template literals are string literals allowing embedded expressions.

It takes that form:

`string text ${expression} string text`

So you could do something like

<List.Item title={`${item.amount} ${item.currency}`} />