title: How to fetch font awesome icon from JSON data in reactjs?
body: <p>I have an array of json data. Using axios I am fetching data from API and I want to mapping with different json data. Everything is fetching properly. but font awesome icons are not fetching. Inside of that its fetching pure code in front end UI eg.(Spa). this is what I have tried. Please go throw my code.</p>
  
  <p>I have tried several different ways of adding font awesome icons by using , , etc. I have tried many of the solutions suggested here, however I am unable to get any of it to produce icons.</p>
  
  <pre><code>-----------------------------------------------------------------------
    {amenitiesdata.map((amenities, index) =&gt; (
                                  &lt;div key={index} className="col-lg-4 col-md-4"&gt;
                                      &lt;p&gt;{amenitiesUiMap[amenities].img + '' + amenitiesUiMap[amenities].name}&lt;/p&gt;
                                  &lt;/div&gt;
                              ))}
  ------------------------------------------------------------------------------------
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './src/../../assets/css/homenavbarwithsearch.css';
  import '../../node_modules/font-awesome/css/font-awesome.min.css';
  import NavBar from './navbar';
  import Example from '../Components/datepicker';
  import axios from 'axios';
  import '../scripts/api';
  
  class HomeNavBarwithSearch extends Component {
      constructor(props) {
          super(props);
          this.state = {
              propertyname: [],
              buildingtype: [],
              amenitiesdata: [],
              uiRoomType: {
                  "SingleBedRoom": "Single Bed Room",
                  "DoubleBedRoom": "Double Bed Room",
                  "OneBHKApartment": "One BHK Apartment",
                  "TwoBHKApartment": "Two BHK Apartment",
                  "ThreeBHKApartment": "Three BHK Apartment",
              },
  
              amenitiesUiMap: {
                  "AirConditioning": {
                      "img": "&lt;i className=\"fas fa-snowflake\"&gt;&lt;/i&gt;",
                      "name": "Air Conditioning"
                  },
                  "AirportTransfer": {
                      "img": "&lt;i className=\"fa fa-plane\" aria-hidden=\"true\"&gt;&lt;/i&gt;",
                      "name": "Airport Transfer"
                  },
                  "Balcony": {
                      "img": "&lt;i className=\"fas fa-dungeon\"&gt;&lt;/i&gt;",
                      "name": "Balcony"
                  },
                  "Bathtub": {
                      "img": "&lt;i className=\"fa fa-bath\" aria-hidden=\"true\"&gt;&lt;/i&gt;",
                      "name": "Bathtub"
                  },
                  "BusinessFriendly": {
                      "img": "&lt;i className=\"fa fa-handshake-o\" aria-hidden=\"true\"&gt;&lt;/i&gt;",
                      "name": "Business Friendly"
                  },
                  "CarPark": {
                      "img": "&lt;i className=\"fa fa-car\" aria-hidden=\"true\"&gt;&lt;/i&gt;",
                      "name": "Car Park"
                  },
                  "CoffeeMaker": {
                      "img": "&lt;i className=\"fa fa-coffee\" aria-hidden=\"true\"&gt;&lt;/i&gt;",
                      "name": "Coffee Maker"
                  },
                  "DisableFriendly": {
                      "img": "&lt;i className=\"fas fa-wheelchair\"&gt;&lt;/i&gt;",
                      "name": "Disable Friendly"
                  },
                  "FrontDesk": {
                      "img": "&lt;i className=\"fa fa-desktop\" aria-hidden=\"true\"&gt;&lt;/i&gt;",
                      "name": "Front Desk"
                  },
                  "FullyFurnished": {
                      "img": "&lt;i className=\"fas fa-couch\"&gt;&lt;/i&gt;",
                      "name": "Fully Furnished"
                  },
                  "Gym": {
                      "img": "&lt;i className=\"fas fa-dumbbell\"&gt;&lt;/i&gt;",
                      "name": "Gym"
                  },
                  "Heating": {
                      "img": "&lt;i className=\"fas fa-water\"&gt;&lt;/i&gt;",
                      "name": "Heater"
                  },
                  "Internet": {
                      "img": "&lt;i className=\"fa fa-wifi\" aria-hidden=\"true\"&gt;&lt;/i&gt;",
                      "name": "WiFi"
                  },
                  "Kitchen": {
                      "img": "&lt;i className=\"fas fa-utensils\"&gt;&lt;/i&gt;",
                      "name": "Kitchen"
                  },
                  "Nightclub": {
                      "img": "&lt;i className=\"fas fa-glass-cheers\"&gt;&lt;/i&gt;",
                      "name": "Nightclub"
                  },
                  "NonSmoking": {
                      "img": "&lt;i className=\"fas fa-smoking-ban\"&gt;&lt;/i&gt;",
                      "name": "Non Smoking"
                  },
                  "PetsAllowed": {
                      "img": "&lt;i className=\"fas fa-dog\"&gt;&lt;/i&gt;",
                      "name": "Pets Allowed"
                  },
                  "PrivatePool": {
                      "img": "&lt;i className=\"fas fa-swimming-pool\"&gt;&lt;/i&gt;",
                      "name": "Private Pool"
                  },
                  "Refrigerator": {
                      "img": "&lt;i className=\"fas fa-door-closed\"&gt;&lt;/i&gt;",
                      "name": "Refrigerator"
                  },
                  "Restaurant": {
                      "img": "&lt;i className=\"fas fa-bread-slice\"&gt;&lt;/i&gt;",
                      "name": "Restaurant"
                  },
                  "Sauna": {
                      "img": "&lt;i className=\"fas fa-hot-tub\"&gt;&lt;/i&gt;",
                      "name": "Sauna"
                  },
                  "SemiFurnished": {
                      "img": "&lt;i className=\"fas fa-chair\"&gt;&lt;/i&gt;",
                      "name": "Semi Furnished"
                  },
                  "Smoking": {
                      "img": "&lt;i className=\"fas fa-smoking\"&gt;&lt;/i&gt;",
                      "name": "Smoking"
                  },
                  "SmokingArea": {
                      "img": "&lt;i className=\"fas fa-smoking\"&gt;&lt;/i&gt;",
                      "name": "Smoking Area"
                  },
                  "Spa": {
                      "img": "&lt;i className=\"fas fa-spa\"&gt;&lt;/i&gt;",
                      "name": "Spa"
                  },
                  "SwimmingPool": {
                      "img": "&lt;i className=\"fas fa-swimmer\"&gt;&lt;/i&gt;",
                      "name": "Swimming Pool"
                  },
                  "TV": {
                      "img": "&lt;i className=\"fa fa-television\" aria-hidden=\"true\"&gt;&lt;/i&gt;",
                      "name": "TV"
                  },
                  "Terrace": {
                      "img": "&lt;i className=\"fas fa-dungeon\"&gt;&lt;/i&gt;",
                      "name": "Terrace"
                  },
                  "WashingMachine": {
                      "img": "&lt;i className=\"fas fa-dumpster\"&gt;&lt;/i&gt;",
                      "name": "Washing Machine"
                  }
              }
          }
      }
  
  
      componentDidMount() {
          axios.all([
              axios.get(`/facility`),
              axios.get(`/meta/roomtypes?buildingtype=Hotel`),
              axios.get(`/facility`)
          ])
              .then(axios.spread((propertyname, buildingtype, amenitiesdata) =&gt; {
                  console.log(propertyname.data[0].name, buildingtype.data);
                  this.setState({
                      propertyname: propertyname.data[0].name,
                      buildingtype: buildingtype.data,
                      amenitiesdata: amenitiesdata.data[0].amenities
                  });
              }))
              .catch(error =&gt; console.log(error));
      }
  
  
  
      render() {
          const { propertyname, buildingtype, amenitiesdata, uiRoomType, amenitiesUiMap } = this.state;
          return (
              &lt;div className="jumbotron-fluid"&gt;
                  &lt;div className="container-fluid"&gt;
                      &lt;NavBar /&gt;
                  &lt;/div&gt;
                  &lt;div className="container-fluid" style={{ paddingBottom: '40px', paddingTop: '60px' }}&gt;
  
                      &lt;div className="center"&gt;
                          &lt;span style={{ fontSize: '18px' }}&gt;Hotel&lt;/span&gt;
                          &lt;div className="form-inline" id="form" action=""&gt;
                              &lt;button type="" id="propertyname"&gt;{propertyname}&lt;/button&gt;
                              &lt;select name="roomtype" id="roomType" placeholder="Room Type"&gt;
                                  {buildingtype.map((roomtype, index) =&gt; (
                                      &lt;option key={index} value={roomtype}&gt;{uiRoomType[roomtype]}&lt;/option&gt;
                                  ))}
                              &lt;/select&gt;
                              &lt;Example /&gt;
                              &lt;select name="adults" id="" placeholder="Adults"&gt;
                                  &lt;option value="1adult"&gt;1 adult&lt;/option&gt;
                                  &lt;option value="2adults"&gt;2 adults&lt;/option&gt;
                                  &lt;option value="3adults"&gt;3 adults&lt;/option&gt;
                                  &lt;option value="4 adults"&gt;4 adults&lt;/option&gt;
                              &lt;/select&gt;
                              &lt;button id="search" type="submit"&gt;Search&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div className="row"&gt;
                              {amenitiesdata.map((amenities, index) =&gt; (
                                  &lt;div key={index} className="col-lg-4 col-md-4"&gt;
                                      &lt;p&gt;{amenitiesUiMap[amenities].img + '' + amenitiesUiMap[amenities].name}&lt;/p&gt;
                                  &lt;/div&gt;
                              ))}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  
  }
  
  
  export default HomeNavBarwithSearch;
  
  i want to show font amenities icon and name. but getting code like this UI
  
  "&lt;i className="fa fa-plane" aria-hidden="true"&gt;&lt;/i&gt;Airport Transfer"
  </code></pre>