Replacing a javascript style object in a html string

Question

Following is my react code block

import React from 'react';
import { render } from 'react-dom';
import Parser from 'html-react-parser';
var styles = {
    primaryLable60: {
        fontSize: '60px',
        color: '#dedede',
        direction: 'ltr',
        textAlign: '-webkit-auto',
    }
};
var htmlString = "<div style={styles.primaryLable60}>Hello World</div>";

const renderRoot = document.getElementById('root');
render(
    <div>
        {Parser(htmlString)}
        <div style={styles.primaryLable60}>
            Hello World
        </div>
    </div>
    , renderRoot)

I need to get the actual "styles.primaryLable60" style object while rendering.

New to react, so need help on it

Answer 1

Use dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{__html: htmlString}} />

Instead of

{Parser(htmlString)}

no need to use html-react-parser.

may be you have to use if you really need Parser.

import Parser from "react-html-parser";

refer here about react-html-parser