11

I want to import an HTML file into a React component

enter image description here

peft.html

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

index.js

import perf from perf.html

class Index extends React.Component {
   render(){
      return (
         <iframe src="perf"></iframe>   /* like this */
         <iframe src="./perf"></iframe> /* or like this */
         /* or like any possible way */
      );
   }
}
export default Index;

so in my case, I need to import a local HTML file and use it in but I'm getting the error:

Uncaught (in promise) Error: Module parse failed: C:\Users....\target.html Unexpected token (1:0) You may need an appropriate loader to handle this file type.

any ideas? How to load an HTML file inside of a React Component? How to add an appropriate loader to handle this file type? Anything?

I find this solution as most logical:

var __html = require('./template.html');
var template = { __html: __html };

React.module.exports = React.createClass({
  render: function() {
    return(
      <div dangerouslySetInnerHTML={template} />
    );
  }
});

but I can not apply it because I'm getting an error:

Uncaught (in promise) Error: Module parse failed: C:\Users\....\target.html Unexpected token (1:0) You may need an appropriate loader to handle this file type. 
| <!DOCTYPE html> 
| <html xmlns="w3.org/1999/xhtml">; 
| <head><title>
Zack Zilic
  • 754
  • 3
  • 10
  • 27
  • 1
    Look at: https://stackoverflow.com/questions/33973757/how-can-i-render-html-from-another-file-in-a-react-component – Lumpenstein Jun 11 '18 at 08:05
  • Why not make it `peft.js` instead of `.html` extension? Is there any reason?. You can also use this "const component(){ return(
    hello World
    )}"     – Deee Jun 11 '18 at 08:13

1 Answers1

11

You can import or require the html file and use it in the src attribute,

var perf =require('./template.html');

class Index extends React.Component {
   render(){
      return (
         <iframe src={perf }></iframe>   /* like this */
      );
   }
}
export default Index;
Rohith Murali
  • 5,255
  • 2
  • 22
  • 25