I am using headless wordpress for content generation. It returns pre-generated html. I put it in react using a plugin Html-React-Parser. The plugin also allows you to replace elements. At this point, I change the wrapper of the slider to a component. And I put child elements inside with domToReact(children). On startup, I expect to see a done slider. But there is an empty div in front of each slide. I maked sandbox where you can see this problem.
https://codesandbox.io/s/interesting-booth-1jhyvm?file=/src/App.js
import SwipeableViews from "react-swipeable-views";
import parse, { domToReact } from "html-react-parser";
const html = `
<div class="slider">
<div class="slide">123</div>
<div class="slide">456</div>
<div class="slide">789</div>
</div>
`;
const options = {
replace: ({ attribs, children, data }) => {
if (!attribs) {
return;
}
if (attribs.class === "slider") {
return (
<SwipeableViews enableMouseEvents>
{domToReact(children)}
</SwipeableViews>
);
}
}
};
export default function App() {
return (
<div className="App">
{parse(html, options)}
</div>
);
}