CODEWITHSUNDEEP
reactjsintegration
Tiago B
Tiago B

Reputation: 2065

How to execute a POST response content, that is an script tag, automatically in React?

I am working on a react project, that will replace the login page of our legacy system. This react app, however, still need to make a post request to this legacy ASP page because of integration and business rules reasons.

My challenge is to integrate the return of this ASP with react. The legacy response is a string in case of error, or a script html tag in case of success.

Changing the legacy response is not an option

Error response example: Password/Username is invalid

Success example:

<script type='text/javascript'>top.location = 'http://www.contoso.com/myIndexPage.asp?token={FFF6F5F0F-F000-0F00-0000-F000F00F0000}'</script>

My problem is how to proper handle the request, and if is a success, execute this script tag automatically? I have tried using dangerouslySetInnerHTML, but it is not executing the script. The script tag is being inserted in the HTML correctly though.

This is how I am using it:

<div dangerouslySetInnerHTML={{__html: this.myASPReturn}} />

How do I execute the success script tag in case of a valid login, or just show the error message in case of an invalid login?

Upvotes: 1

Views: 299

Answers (1)

Max
Max

Reputation: 1567

This is one solution.

First parse the html. I used this technique: Parse an HTML string with JS

const string = "<script type='text/javascript'>top.location = 'http://www.contoso.com/myIndexPage.asp?token={FFF6F5F0F-F000-0F00-0000-F000F00F0000}'</script>"

const el = document.createElement('div');
el.innerHTML = string;

Then get the code from the script element and eval() it.

const scriptString = el.firstChild.innerText;
eval(scriptString);

Upvotes: 1

Related Questions