Reactjs: How to put HTML into primaryText of a list item?

Question

I would like to have a span inside the ListItem like this:

<ListItem
    primaryText={"<span class='inner'>Some important info</span>" + item.title}
/>

When this is rendered, I don't get an HTML span element, but a text <span class='inner'>Some important info</span>Title of the list item. How to make HTML render as HTML?

Answer 1

Remove "" around the span, because when you use " it will get converted into string, it will not be treated as html tag.

Write it like this this:

primaryText={<div>
                <span className='inner'>Some important info</span>
                {item.title}
            </div>}

Note: class is reserved keyword so, to apply css classes use className.

Answer 2

EDIT: Ignore me, just saw you needed it specifically for a ListItem

If you need to render HTML within an element, you can use the dangerouslySetInnerHTML prop (but it comes with some risks, and the name suggests):

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

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

Docs here: https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml