Set React state from JSON to display HTML elements

user_14417602 0
Viewed 27

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>, })
            }
           

        }
reactjs
1 Answers

You should use dangerouslySetInnerHTML property to do that.

this.setState({
  message: (
    <span dangerouslySetInnerHTML ={{ __html: body }} className="text-danger" />
  )
});
user_85104050
Related