Using html in variable

Question

I have some html in variable

export const PropertyDesign = {
 clubhouse: `<i class="fas fa-utensils icon-property"></i>`,
 gymnasium: `<i class="fas fa-dumbbell icon-property"></i>`,
 swimingPool: `<i class="fas fa-swimming-pool icon-property"></i>`,
 joggingTrack: `<i class="fas fa-running icon-property"></i>`, 
 playArea: `<i class="fab fa-playstation icon-property"></i>`
}

Which I want to use in JSX of my javascript, I initially tried this

    <p> {PropertyDesign[feature]} </p>

Where feature is my key.

but this is displaying like this in my page. Any idea how I can display icon instead of markup?

Possible duplicate of [Render HTML string as real HTML in a React component](https://stackoverflow.com/questions/39758136/render-html-string-as-real-html-in-a-react-component) — Federico klez Culloca, Oct 28 '19 at 16:37
(Not the accepted answer, but the most voted one, to be precise) — Federico klez Culloca, Oct 28 '19 at 16:38

score 2 · Answer 1 · answered Oct 28 '19 at 16:38

2

Remove the template string represetation from the object:

export const PropertyDesign = {
 clubhouse: <i className="fas fa-utensils icon-property"></i>,
}

Using template strings would just render it as string and not JSX.

Also, use className in JSX

answered Oct 28 '19 at 16:38

Agney

16,443
6
45
68

I think you can't use JSX without importing react? – iRohitBhatia Oct 28 '19 at 16:48

Using html in variable

1 Answers1