How to manipulate DocumentFragment in react?

Asked Jun 27 '20 at 02:49

Active Jun 28 '20 at 03:04

Viewed 212 times

I am working on an ePub app, currently I want to display a note/highlight section on a sidebar.

I am able to get the Range object (by the document.crateRange method), then call cloneContents from it which it return a DocumentFragment object.

I had tried to create a ref object, and able to append the DocumentFragment object into it. However, I want to wrap the DocumentFragment object inside a checkbox element.

I had tried with something like

<Checkbox>
{documentFragment object}
</Checkbox>

which will throw error Uncaught Error: Objects are not valid as a React child (found: [object DocumentFragment]). If you meant to render a collection of children, use an array instead..

I know I could just get the textContent only from this DocumentFragment object, however I want to keep the styles came with it, and also wrap it inside a checkbox. How could I achieve this in react?

P.S. documentFragment object looks like this on log:

edited Jun 28 '20 at 03:04

asked Jun 27 '20 at 02:49

Jiahua Zhang

Can you add to your question what the DocumentFragment object looks like? – jmargolisvt Jun 27 '20 at 02:59
[A DocumentFragment object](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment), it looks like jsx.element but react is not aware of – Jiahua Zhang Jun 28 '20 at 03:06

How to manipulate DocumentFragment in react?

0 Answers0