How can I return my data string through a dangerouslyHTML function in order to render out bold tags?

Question

I have a React application. I'm trying to figure out how to render a string from an object with bold tags. When I render the data, the renderer picks up on the new lines tag, but ignores the bold tags and literally prints them as text... example: hi

How can I render out my content string with bold tags? Should I be storing the string differently? Below is my data and the render function

const imgPath = '.app/img/';

const Data = {
    {
        name: 'helpdesk',
        title: 'Help Desk',
        content: `Welcome to the <b>Help Desk</b>.\n\n From here you will be able to troubleshoot various problems.\n\n`,
        image: `${imgPath}helpDesk.PNG`
    }
}

export default Data;

Render

const renderHelpFile = this.props.data.filter(obj => {
            return this.props.name === obj.name;
                }).map((obj, idx) => {
                return (
                    <div key={idx} className="fadingDiv">
                        <div className="displayLineBreak">  
                            <h2 style={upperStyle}> {obj.name} </h2>s
                            {obj.content}
                        </div>
                        <div className="divImg">
                            <img src={`${obj.image}`} className="helpFileImg" onClick={this.openModal}></img><br />
                            <Modal
                                isOpen={this.state.modalIsOpen}
                                onAfterOpen={this.afterOpenModal}
                                onRequestClose={this.closeModal}
                                style={customStyles}
                                contentLabel="Lewis Controls"
                             >
                                <center>
                                <p style={upperStyle} className="modalTitle">{obj.name}</p>
                                <div className="imgModal"><img src={`${obj.image}`} className="helpFileImg"></img></div>
                                </center>
                            </Modal>
                        </div>
                    </div>
                );
        });

Possible duplicate of [Reactjs convert to html](https://stackoverflow.com/questions/19266197/reactjs-convert-to-html) — bennygenel, Oct 12 '17 at 20:59
You might also want to check out the react-render-html npm package https://www.npmjs.com/package/react-render-html as a better alternative. — Thomas Hennes, Oct 12 '17 at 23:15

Chase DeAnda · Accepted Answer · 2017-10-12T21:04:01.517

You need to use the dangerouslySetInnerHTML prop to render out Data.content.

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM.

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

EDIT:

const getRawHTML = html => ({ __html: html });

const renderHelpFile = this.props.data.filter(obj => {
    return this.props.name === obj.name;
}).map((obj, idx) => {
    return (
        <div key={idx} className="fadingDiv">
            <div className="displayLineBreak">
                <h2 style={upperStyle}> {obj.name} </h2>s
                <div dangerouslySetInnerHTML={getRawHTML(obj.content)}></div>
            </div>
            <div className="divImg">
                <img src={`${obj.image}`} className="helpFileImg" onClick={this.openModal}></img><br />
                <Modal
                    isOpen={this.state.modalIsOpen}
                    onAfterOpen={this.afterOpenModal}
                    onRequestClose={this.closeModal}
                    style={customStyles}
                    contentLabel="Lewis Controls"
                >
                    <center>
                        <p style={upperStyle} className="modalTitle">{obj.name}</p>
                        <div className="imgModal"><img src={`${obj.image}`} className="helpFileImg"></img></div>
                    </center>
                </Modal>
            </div>
        </div>
    );
});

I've seen something about this, just really not sure how to set it up. With HTML I can just use innerHTML. I have to make a regex for this? — user3622460, Oct 12 '17 at 21:01
@user3622460 No, no regex. You just have to create a special object with a key of `__html` and the value is a string of raw html. — Chase DeAnda, Oct 12 '17 at 21:02
How could I return an object through that though? My object has multiple strings and is rendering out through mapping — user3622460, Oct 12 '17 at 21:03
Also @AustinGreco gave a good solution. Store the html as JSX and you don't have to worry about this. — Chase DeAnda, Oct 12 '17 at 21:09

score 1 · Answer 2 · answered Oct 12 '17 at 20:59

You can do it with dangerouslySetInnerHTML, but maybe it's better to do it as JSX directly if possible:

import React from 'react';
const imgPath = '.app/img/';

const Data = {
    {
        name: 'helpdesk',
        title: 'Help Desk',
        content: (
          <span>Welcome to the <b>Help Desk</b>.\n\n From here you will be able to troubleshoot various problems.\n\n</span>
        ),
        image: `${imgPath}helpDesk.PNG`
    }
}

How can I return my data string through a dangerouslyHTML function in order to render out bold tags?

2 Answers2