0

I am trying to get the content of an HTML file into a React component, here is the HTML (it is written automatically by a python script that's why I can't just copy/paste it):

<div class="bionic-reader bionic-reader-28ed7a3f-858a-42ce-b179-f51492043780 origin " style="" >
    <div class="bionic-reader-content">
        <div class="bionic-reader-container">
            
            
            <b class="b bionic">thi</b>s <b class="b bionic">i</b>s a <b class="b bionic">bi</b>g <b class="b bionic">tes</b>t <b class="b bionic">o</b>f <b class="b bionic">senten</b>ce
            
                <!-- <div class="br-foot-node">
                    <p style="margin: 32px 0 32px 70px; font-weight: 700; font-size: 26px; line-height: 1.6em;">
                        —
                    </p>
                    <p>
                        Bionic Reading<sup>®</sup><br>
                        A higher dimension of reading.<br>
                        <a href="https://bionic-reading.com">bionic-reading.com</a>
                    </p>
                    <br/>
                    <br/>
                    <p>
                        
                    </p>
                </div> -->
            
        </div>
    </div>
</div>

And here is the React component I wanted to put the HTML into, here I tried a method using dangerouslySetInnerHTML, but it is showing me the following error:

import React from 'react'
import htmlContent from './htmlContent.html';

export default function Home() {
    return (
      <div dangerouslySetInnerHTML={ {__html: htmlContent} } />
    )};
Compiled with problems:X

ERROR in ./src/htmlContent.html 1:0

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <div class="bionic-reader bionic-reader-28ed7a3f-858a-42ce-b179-f51492043780 origin " style="" >
|     <div class="bionic-reader-content">
|         <div class="bionic-reader-container">
Raju Ahmed
  • 1,267
  • 2
  • 13
  • 23
Aries
  • 1
  • 1
  • 1
    Hope this helps: [link](https://stackoverflow.com/questions/33973757/how-can-i-render-html-from-another-file-in-a-react-component) – HJEC May 29 '22 at 09:36

0 Answers0