target DOM element with React.createPortal

Question

I would like to get the innerHTML of a div with the className "editor" which i am passing in through useContext. Once I receive the innerHTML, I will append it to a div with the className "getcontent". Currently, my code is giving me an error message "Error: Target container is not a DOM element." I have created a Codesandbox . Thanks In Advance!

Answer 1

It seems that you pass 'editor' string to the query selector. It's incorrect.

Your content.editor is equal to "editor" string.

But when you use querySelector you have to use syntax like css selectors (# - id, . - class).

I think that you have just missed this dot.

document.querySelector('.editor');

Full solution:

ReactDOM.createPortal(null, document.querySelector(`.${context.editor}`));

It works for me now without any errors :)

Another function without dot:

document.getElementsByClassName('editor')[0];