Set React state from JSON to display HTML elements

Question

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.

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

        }

Does this answer your question? Render HTML string as real HTML in a React component — Bilguun Zorigt
– Bilguun Zorigt, Commented Mar 3, 2022 at 9:27

Amila Senadheera · Accepted Answer · 2022-03-03 09:27:37Z

1

You should use dangerouslySetInnerHTML property to do that.

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

answered Mar 3, 2022 at 9:27

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set React state from JSON to display HTML elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related