1

I have created a simple login form, when I login the api responses the correct data to the data I have send from the form, so if I login correct/incorrect details the response I get is right, however in the message span the response is HTML and is just been displayed as text. How can I get it to display as HTML rather than plain-text as displayed in the image.

enter image description here

        if(body.length > 0 )
        {
            //console.log(myAccountDetails);
            if(body === Array){
                this.setState({message:<span className="text-success">Logged In</span>, })
            }
            else
            {
                this.setState({message:<span className="text-danger">{body}</span>, })
            }
           

        }
aneuroo
  • 77
  • 1
  • 8
  • Does this answer your question? [Render HTML string as real HTML in a React component](https://stackoverflow.com/questions/39758136/render-html-string-as-real-html-in-a-react-component) – BIlguun Zorigt Mar 03 '22 at 09:27

1 Answers1

1

You should use dangerouslySetInnerHTML property to do that.

this.setState({
  message: (
    <span dangerouslySetInnerHTML ={{ __html: body }} className="text-danger" />
  )
});
Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43