React keeping special characters in render

Question

I am trying to render a carousel in react and it is working fine. The issue is with the special characters in the text. The carouselText contains some special characters are appearing like candidates instead of candidates'.

<div className="servicesslider">
            <Carousel slide={true} controls={false} activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}>
              { servicesData.slice(0,5).map((sdata, i) =>
                <Carousel.Item key={i}>
                  <img className="carousel-image" width={557} height={427} alt="first" title="first" src={sdata.carouselImage} />
                  <div className="carousel-body">
                    <h3>{sdata.text}</h3>
                    <p dangerouslySetInnerHTML={ { __html: sdata.carouselText } }></p>                        
                  </div>
                </Carousel.Item>)
              }
            </Carousel>
          </div>

Please suggest me a solution for this.

Answer 1

您可以将文本作为纯js发送，但JSX文件的编码应为UTF-8

write it as {'your value'}