'Mixing strings and html links in react/typescript constants

Im trying to mix a string and a link, within an attribute of one variable :

const News = [
  {
    headline: 'some headline',
    text:
      "some text" + <a href='url'> click me </a>,
  },
];

Im displaying News on another page, when I access the text via news.text though I get following output

some text[object Object]

Following code works fine

const News = [
      {
        headline: 'some headline',
        text:
          <a href='url'> click me </a>,
      },
    ];

I have read similar questions, they were quite what I was looking for, since I feel like there has to be a simple solution for this small problem.

javascript reactjs

Solution 1:^[1]

if your las example works for you, maybe you could try something like this:

const News = [
  {
    headline: 'some headline',
    text: <span>Some text <a href='url'> click me </a></span>,
  },
];

I haven't tested, but is just an idea. Cheers!

This is handful when mixing HTML tags with variables:

 <li className="row"><strong> Alerts: </strong> <br/>  {`${user.alerts}`} </li>

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source
Solution 1	Bruno Sendras
Solution 2