How to display html tag in string-CodePudding

I have a data

const Data = [
    {
      id: '1',
      title: 'Blablab<b>labl</b>abla',
    },
    {
      id: '2',
      title: '2Blablab<b>labl</b>abla',
    },
  ];

<p>{Data.title}</p>

Output : Blablab<b>labl</b>abla 

tag <b></b> not render

the output i want is bold

The code above is just an example, for the data in my project I use the API and in the API the data type is string. inside the string contains the html tag but the html is not readable in the display

CodePudding user response：

Using dangerouslysetinnerhtml ...

A sample e.g.

function MyComponent() {
  return <div dangerouslySetInnerHTML={{__html: '2Blablab<b>labl</b>abla'}} />;
}

CodePudding user response：

replace the tag with the special characters

Blablab&lt;b&gt;labl&lt;/b&gt;abla

CodePudding user response：

You might want to use markdown instead of dangerouslySetInnerHTML. https://github.com/markedjs/marked