React: How to render a text/html http response?

Question

I am creating an app that uploads an .xls file to a server, and the response is a text/html response. I would like to preview the response (exactly as in the developer tool). Something like:

        axios.post(config.serverUrl + "/file", formData)
            .then(response => {

                //Preview response code
            }

I tried dangerouslySetInnerHTML={{ __html: {response.data} }} but that did not work.

Response example:

<!DOCTYPE html><html><head><style>table, td{    border: 1px solid black;
    border-collapse: collapse;
    padding: 9px;
}</style><title>file3500064108648651012.tmp</title></head><body><table>
<tr><td>Sheet 1</td></tr>
<tr><td>Test</td><td>Test1</td><td>Test2</td></tr>
<tr><td>test</td><td>test1</td><td>test2</td></tr>
</table></body></html>

The preview should then look like:

<!DOCTYPE html><html><head><style>table, td{    border: 1px solid black;
    border-collapse: collapse;
    padding: 9px;
}</style><title>file3500064108648651012.tmp</title></head><body><table>
<tr><td>Sheet 1</td></tr>
<tr><td>Test</td><td>Test1</td><td>Test2</td></tr>
<tr><td>test</td><td>test1</td><td>test2</td></tr>
</table></body></html>

Can you provide a short example of the response, and also your desired behaviour? — defraggled
– defraggled, Commented Nov 13, 2020 at 12:36

Aadil Mehraj · Accepted Answer · 2020-11-13 13:18:29Z

3

You can use dangerouslySetInnerHTML to set HTML directly:

 <div dangerouslySetInnerHTML={response} />

answered Nov 13, 2020 at 13:18

Aadil Mehraj

2,6141 gold badge9 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

React: How to render a text/html http response?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related