React - HTML element inside to string

Question

I have an object I want to set an html element inside this object

    {
        titleName: "Indorction",
        heading: 'Welcome to JavaScript',
        iconName: faDotCircle,
        description: [
            `
            Do we even need to introduce `${<p>HTML element</p>}`? It’s one of the most popular programming 
            languages on the planet!
            Ever visited a website that made you think…"Hey, this website is really cool and
            `
        ],
    },

score 0 · Accepted Answer · answered Dec 03 '20 at 07:52

0

I'm not sure how to flag as duplicate but you can find your answer here: Render HTML string as real HTML in a React component

Basically you want to render a string as HTML, which is a dangerous practice so beware.

const x = {
        titleName: "Indorction",
        heading: 'Welcome to JavaScript',
        iconName: faDotCircle,
        description: [
            `
            Do we even need to introduce <p>HTML element</p>? It’s one of the most popular programming 
            languages on the planet!
            Ever visited a website that made you think…"Hey, this website is really cool and
            `
        ],
    },

And inside your render function:

<div dangerouslySetInnerHTML={{ __html: x.description }}></div>

answered Dec 03 '20 at 07:52

Baki

564
2
10
22

Thanks for the answer, I just want to add style to a specific word from the object text, for example, change the color of a word, maybe there are options? – Synchro Dec 03 '20 at 08:28
Sorry for the late answer, I guess you would have to create a custom parser for it or use the above innerHtml. I think a reasonable solution would be to create a array of objects with properties, e.g.: `description: [{text: 'Do we even', className: 'red-text'}, {text: 'need to introduce', className: ''}]` And then map it to a list of spans, e.g.: `{item.text}>`. This would give you more control over the whole process and be more secure. – Baki Dec 08 '20 at 07:55

score 0 · Answer 2 · answered Dec 03 '20 at 11:45

JavaScript_Lessons_Objects.js

{
    titleName: "Indorction",
    heading: 'Welcome to JavaScript',
    iconName: faDotCircle,
    description: [
      `
       Do we even need to introduce <b class="hal">JavaScript</b>? It’s one of the most 
       popular programming languages on the planet!.
      `
   ],
},

Lesson.jsx

{ReactHtmlParser(this.props.lesson[this.state.indexDescription]["description"])}

React - HTML element inside to string

2 Answers2