Question 171936 in Reactjs Question posted in
The new location for the React Documentation can be found here.

“Is the target container for Reactjs Component mount an DOM element?”

I am trying to insert/mount a component into a DOM, but getting an error saying ‘Target container is not a DOM element’. I guess ‘mounthere’ is not getting recognized in the DOM. Where can i place this code correctly?
ReactDOM.createRoot(React.createElement(Comp1, document.getElementById("mounthere")));

DOM code:

const DOM1 = () => {
ReactDOM.createRoot(React.createElement(Comp1, document.getElementById("mounthere")));

    function1()
    {
    }

    useEffect(() => {
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    return (
        <div class = "DOM1-container">
            <Header />
            <div class = "dom1">
                <div id = "mounthere">
                </div>
            </div>
        </div>
    );
}

Component code:

class Comp1 extends React.Component {
    content1 = () => {
      });
    };
    
    componentDidMount() {
      this.content1();
    }
    render() {
      return (
        <div id="div1">
        </div>
      );
    }
  }
Tags:

2

Answers


  1. 0

    There is no need for React.createElement since Comp1 is already a component.

    Just move the createRoot outside of the class, and pass <Comp1 /> to the render() call:

    class Comp1 extends React.Component {
    render() {
      return (
        <div id="div1">
          FooBar
        </div>
      );
    }
  }

ReactDOM.createRoot(
    document.getElementById("mounthere")
).render(<Comp1 />);
    <div id="mounthere"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
  2. 0

    In your code, you are trying to mount Comp1 into the element with id "mounthere". However, this element may not have been rendered yet when ReactDOM.createRoot() is called. useEffect can solve your problem

     useEffect(() => {
    ReactDOM.createRoot(document.getElementById("mounthere")).render(<Comp1 />);
  }, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search