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 — Federico klez Culloca
– Federico klez Culloca, Commented Oct 28, 2019 at 16:37
(Not the accepted answer, but the most voted one, to be precise) — Federico klez Culloca
– Federico klez Culloca, Commented Oct 28, 2019 at 16:38

Agney · Accepted Answer · 2019-10-28 16:38:29Z

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, 2019 at 16:38

Agney

19.3k7 gold badges60 silver badges76 bronze badges

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

1 Comment

Alwaysblue Over a year ago

I think you can't use JSX without importing react?

Collectives™ on Stack Overflow

Using html in variable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related