Why ReactDOM.createPortal does not work in my content script?

Question

I have a content.tsx file with the following code:

import React from "react";
import {createPortal} from 'react-dom';

import Text from './Text';

console.log(`Content script...`);

createPortal(
    <Text/>,
    document.body
);

"Text" component code:

import React from 'react';

const Text = () => {
    return (
        <div>
            Just text...
        </div>
    );
};

export default Text;

My manifest includes:

...other keys
"content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["./static/js/content.js"],
      "run_at": "document_end"
    }
]

As you can see, the file is loaded and the message Content script ... is printed in the console. https://i.sstatic.net/GS0gK.png

But the div with the text Just text... was not added to the body, in other words, createPortal does not work. https://i.sstatic.net/j2geh.png

Answer 1

you need to write createPortal inside return or render,

like this:

render() {
    return ReactDOM.createPortal(
         this.props.children,
         document.body
     );
}