CODEWITHSUNDEEP
javascripthtmlreactjsjsx
Alwaysblue
Alwaysblue

Reputation: 11940

Using html in variable

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?

enter image description here

Upvotes: 0

Views: 56

Answers (1)

Agney
Agney

Reputation: 19224

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

Upvotes: 2

Related Questions