Greetings!
I have a React app, where I am trying to render an HTML file using
import React, { useState } from 'react';
import ReactFileReader from 'react-file-reader';
import {DashboardLayout} from '../components/Layout';
import {Button, Toolbar, Typography} from "@material-ui/core";
import ReactHtmlParser from 'react-html-parser';
const Main = () => {
const [image, setImage] = useState('')
let fileReader;
const handleFiles = files => {
const file = files.item(0);
fileReader = new FileReader();
fileReader.onloadend = handleFileRead;
fileReader.readAsText(file);
}
const handleFileRead = (e) => {
const content = fileReader.result;
console.log(content)
setImage(content)
}
return (
<>
<ReactFileReader handleFiles={handleFiles} fileTypes={[".xlsx",".html", ".txt"]} >
<Button
variant='contained'
color='secondary'
>
Upload results
</Button>
</ReactFileReader>
<>{ ReactHtmlParser(image) }</>
</>
)
}
const LoadResults = () => {
return (
<DashboardLayout>
<Toolbar>
<Typography variant="h6">MOSCA results page</Typography>
</Toolbar>
<Main />
</DashboardLayout>
)
}
export default LoadResults;
where image is the raw content of the HTML, and it is giving me the error Warning: validateDOMNesting(...): <html> cannot appear as a child of <div>.. I am sharing the files I tried to render. This code worked in rendering the working.html file, but not the not_working.html
Greetings!
I have a React app, where I am trying to render an HTML file using
where
imageis the raw content of the HTML, and it is giving me the errorWarning: validateDOMNesting(...): <html> cannot appear as a child of <div>.. I am sharing the files I tried to render. This code worked in rendering theworking.htmlfile, but not thenot_working.html