Adding html tag inside javascript string

Question

I have the following code in react js:

'use strict';

module.exports = {
    homePage: {
        sliderTitle: 'Creative portfolio',

        loginTitle: 'Do you already <b>have</b> an account?'

    },
    registrationPage: {
        foo: 'bar'
    }
};

When I try to use those labels I have

var EN = require('./en');
{EN.homePage.loginTitle}

but {EN.homePage.loginTitle} returns the string with b tags inside.

How can I apply this b tag to the word have?

You should probably use the Dangerously set innerHTML attribute, like proposed here: facebook.github.io/react/tips/dangerously-set-inner-html.html — Icepickle
– Icepickle, Commented May 17, 2016 at 12:26
I tried with loginTitle: {__html: 'Do you already <b>have</b> an account?'} , but the same problem. — Boky
– Boky, Commented May 17, 2016 at 12:28
and you also passed it as dangerouslySetInnerHTML prop to the div? like <div dangerouslySetInnerHTML={EN.homePage.loginTitle} /> — Richard Rutsche
– Richard Rutsche, Commented May 17, 2016 at 12:54

Brad Colthurst · Accepted Answer · 2016-05-17 13:12:31Z

10

One option as mentioned in the comments is to use dangerouslySetInnerHTML assigning loginTitle a __html object (note the double underscore '__') and passing it to the element as a prop.

loginTitle: {__html: 'Do you already <b> have </b> an account?' }
...
<div dangerouslySetInnerHTML={EN.homePage.loginTitle}></div>

Generally speaking though you should avoid using dangerouslySetInnerHTML whenever possible as emphasized in the docs: https://facebook.github.io/react/tips/dangerously-set-inner-html.html

There are other safer options to insert HTML in your text outlined here: http://facebook.github.io/react/docs/jsx-gotchas.html

One that should work well for you in this situation is to used a mixed array of strings & JSX, so:

loginTitle: ['Do you already ', <b>have</b>, ' an account']
...
<p>{EN.homePage.loginTitle}</p>

Here's a DEMO as well just to illustrate that both approaches have the same effect.

answered May 17, 2016 at 13:12

Brad Colthurst

2,60517 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hellowhirl Over a year ago

One could argue that there are indeed specific use cases for dangerouslySetInnerHTML, so don't feel bad using it! For example, string data that we are parsing from an API response can be parsed by wrapping a <span> tag for certain words to be styled differently. As long as this html ISN'T ABLE TO BE SET BY THE USER then there shouldn't be any harm in using dangerouslySetInnerHTML.

Collectives™ on Stack Overflow

Adding html tag inside javascript string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related