How to give html tags inside string interpolation in reactjs?

Question

I have

const getConfirmMsg= (card, isDelete) => {
       const valueType = getValue(card);
    
        const confirmMessage = isDelete ? (
              `You are about to delete the ${valueType}.This is the last value.`
          ) : (
            `All selected values will be removed.`
          );

return (
tr(confirmMessage, {valueType}
);}

I want ${valueType} as itallic font and a line break before the second line.

Answer 1

I did like this and the translation are working fine now. Because I am working on multilingual app. Translations are needed.

const getConfirmMsg= (card, isDelete) => {
       const valueType = getValue(card);
    
        const confirmMessage = isDelete ? (
              <>
              <p>{tr(`You are about to delete the`)} <i>{tr( valueType)}</i> .
              </p>
              <p>{tr(` This is the last value.`)}</p>
              </>
          ) : (
            tr(`All selected values will be removed.`)
          );

return (confirmMessage);
};