HTML renders in the browser but not with ReactHtmlParser

iquasere commented 3 years ago

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

akhi9 commented 3 years ago

@wrakky @iquasere Is there a workaround/fix for this?

iquasere commented 3 years ago

I have still not been able to solve it

peternewnham / react-html-parser

HTML renders in the browser but not with ReactHtmlParser #82