Accent characters retrieved from API not working in ReactJS

Question

I've been searching almost 3 days for this issue but haven't found anything that solves it.

The main issue

I have a simple component in React that shows info about a building in the browser which is retrieved from a backend PHP script.

It seems to output like this when I visit the address directly from browser:

{
  "project": {
    "project": "Acero",
    "address": "CALLE ACERO #65 COL. FELIPE PESCADOR DELEGACION CUAUHTÉMOC C.P. 06280 CDMX",
    "features": "Únicamente 10 departamentos,Desde 53.89m² hasta 111.92m²,2 Recámaras,1 ó 2 Baños,Patio de Servicio,Roof Garden Privado,Terraza o Balcón",
    "price": 1558920,
    "status": "preventa",
    "priority": 2
  },
  "id": 0,
  "images": {
    "0": "Galeria-Acero-01.jpg",
    "1": "Galeria-Acero-02.jpg",
    "2": "Galeria-Acero-03.jpg",
    "3": "Galeria-Acero-04.jpg",
    "4": "Galeria-Acero-05.jpg",
    "5": "Galeria-Acero-06.jpg",
    "6": "Galeria-Acero-07.jpg",
    "desarrollos": "Galeria-Acero-Desarrollos.jpg",
    "h": "Galeria-Acero-H.jpg",
    "home": "Galeria-Acero-Home.jpg"
  },
  "path": "http://api.habitareinmobiliaria.com.mx/desarrollos/Acero/"
}

But when it is rendered in React, it shows up like this:

In the Document DOM

It is correctly shown in the console elements, but not in the rest of the app. Why does this happen and how can I fix it?

My Component code:

Project.js

import React,{Component} from 'react'
import Footer from '../Footer/Footer'
import Header from '../Header'
import SubNav from '../SubNav'
import Details from './Details'
import {Configurations} from '../AppConfig'

class Project extends Component{

    constructor(props) {
        super(props);
        this.state = {
            projectID : props.match.params.id,
            projectName: "",
            topProjectInfo: [],
            images: []
        };
    }

    componentWillMount(){
      fetch(Configurations.API.projectInfo(this.state.projectID))
        .then((result)=>{return result.json() })
        .then((project)=>{
          if(project === "error"){
            alert("Error")
          }else{
            console.log(project)
            var Images = Object.values(project.images);
            console.log(Images)
            //Manipulate those images into JSX
            let ImageGallery = Images.map((img)=>{
              return (
              <div key={Math.random()}className="horizontal_item">
                <div className="zoomimage">
                  <img src={project.path+img} className="intense" alt="" />
                  <i className="fa fa-expand" />
                </div>
                <img src={project.path+img} alt="" />
                <div className="show-info">
                  <span>Info</span>
                  <div className="tooltip-info">
                    <h5>Imagen de muestra</h5>
                    <p>
                      Desarrollo {project.project.project}
                    </p>
                  </div>
                </div>
              </div>
              )
            })
            let TopInfo = (
              <div className="fixed-info-container">
                <h3>{project.project.project}</h3>
                  <div className="separator" />
                  <div className="clearfix" />
                  <p>
                    {project.project.address}
                  </p>
                  <h4>Características</h4>
                  <Details features={project.project.features} />
                  <a
                    href="/"
                    className=" btn anim-button   trans-btn   transition  fl-l"
                    target="_blank"
                  >
                    <span>Ver en mapa</span>
                    <i className="fa fa-eye" />
                  </a>
                  </div>
            )
            this.setState({
              projectName: project.project.project,
              images: ImageGallery,
              topProjectInfo: TopInfo
            },function(){
              window.loadingAlert(500)
              window.initDogma()
            })
          }

        })
    }

    componentDidMount(){
        // setTimeout(function(){
        //   window.history.replaceState(undefined, undefined, "#"+3)
        // },150)
      }

    render(){
        return(
            <div >
                <Header />
                <SubNav />
                <div className="content full-height no-padding">
                {this.state.topProjectInfo}
  {/*  fixed-info-container end*/}
  {/*  resize-carousel-holder*/}
  <div className="resize-carousel-holder vis-info gallery-horizontal-holder">
    {/*  gallery_horizontal*/}
    <div
      id="gallery_horizontal"
      className="gallery_horizontal owl_carousel"
    >
      {this.state.images}
    </div>
    {/*  resize-carousel-holder*/}
    {/*  navigation */}
    <div className="customNavigation">
      <a href="/" className="prev-slide transition">
        <i className="fa fa-angle-left" />
      </a>
      <a href="/" className="next-slide transition">
        <i className="fa fa-angle-right" />
      </a>
    </div>
    {/*  navigation end*/}
  </div>
  {/*  gallery_horizontal end*/}
</div>
<Footer />
</div>

        );
    }
}
export default Project

Detail.js

import React, {Component} from 'react'

class Details extends Component{
    constructor(props){
        super(props)
        this.state = {
            details: []
        }
    }

    componentWillMount(){
        const {features} = this.props
        let exploded = features.split(',')
        let JSX = exploded.map((f,index)=>{
            return <li key={index}>{f}</li>
        })
        this.setState({
            details: JSX
        })
    }

    render(){
        return(
            <ul className="project-details">
                {
                    this.state.details
                }
            </ul>
        )
    }
}
export default Details

Answer 1

The font can be the guilty party here.