Использование HTML в переменной

Question

У меня есть html в переменной

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>`
}

, который я хочу использовать в JSX моего javascript, я сначала попробовал это

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

Где функция - мой ключ.

но это выглядит так на моей странице. Любая идея, как я могу отобразить значок вместо разметки?

Answer 1

Удалите репрезентацию строки шаблона из объекта:

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

Использование строк шаблона будет просто отображать его как строку, а не JSX.

Также используйте className в JSX

Answer 2

Измените ваш объект, указав только имя класса

export const PropertyIcons = {
  clubhouse: "fas fa-utensils icon-property",
  gymnasium: "fas fa-dumbbell icon-property",
  swimingPool: "fas fa-swimming-pool icon-property",
  joggingTrack: "fas fa-running icon-property",
  playArea: "fab fa-playstation icon-property",
 }

, а затем передайте его в виде строки значку className

 <i className={PropertyIcons[feature]} ></i>