How to display html tag in string

Question

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

Are you using plain JS or some kind of framework or a template engine? — RedFox, Nov 09 '22 at 14:35
If you are using react check this question https://stackoverflow.com/questions/39758136/how-to-render-html-string-as-real-html — Емил Цоков, Nov 09 '22 at 14:38
Does this answer your question? [Rendering raw html with reactjs](https://stackoverflow.com/questions/27934238/rendering-raw-html-with-reactjs) — RedFox, Nov 09 '22 at 14:43

score 0 · Answer 1 · answered Nov 09 '22 at 14:37

0

Using dangerouslysetinnerhtml ...

A sample e.g.

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

answered Nov 09 '22 at 14:37

KcH

3,302
3
21
46

score 0 · Answer 2 · answered Nov 09 '22 at 14:52

0

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

answered Nov 09 '22 at 14:52

J. Jesper

117
2
11

How to display html tag in string

2 Answers2