0

The ReactDOM.unmountComponentAtNode(document.getElementById("root")); are unavailable in latest React.

It shows the errors below. How can I fix it?

"You are calling ReactDOM.unmountComponentAtNode() on a container that was previously passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.unmount()?"

"unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component."

import {createRoot} from "react-dom/client";
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App tab={"home"} />);
root.unmount();
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";

class LifeCycle extends React.Component {

    state = {opacity: 1};

    disappear = () => {
        root.unmount(document.getElementById("root"));
    }

    componentDidMount() {
        this.timer = setInterval(() => {
            let {opacity} = this.state;
            opacity-=0.1
            if (opacity <= 0) opacity = 1;
            this.setState({opacity});
        }, 200);
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    render() {
        return (
            <div>
                <h1 style={{opacity: this.state.opacity}}>React is too difficult!</h1>
                <button onClick={this.disappear}>click to remove</button>
            </div>
        )
    }
}


export default LifeCycle;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
David Lew
  • 13
  • 3
  • export/import `root` and do `disappear = () => { root.unmount() }`, perhaps? It's rare to want to unmount the root, so if that's not what you have in mind, please clarify what your goal is. – Nicholas Tower Apr 18 '22 at 04:08
  • Honestly, I don't know the top-level container for this component. It's just a component I import in App js. I have no other container in the HTML file. It's only a demo, so I put it in one root container in the HTML. If there is another top-level container, do you know what it will be? Thanks! – David Lew Apr 18 '22 at 19:29
  • And also, I tried using root. Unmount inside of the arrow function. However, it shows I need to install import {root} from "postcss". So, do we need to instal a package to unmount a function in the new React? – David Lew Apr 18 '22 at 19:38
  • Can you just use react state instead of unmounting the root? If the state is true, show what you want to show. If it's false, show nothing (by returning `null` from render). `However, it shows I need to install import {root} from "postcss"` If you want to use the `root` variable, you need to export it from the file it's in, and import it where you need it. Do not import it from `postcss`; that's an unrelated library. – Nicholas Tower Apr 18 '22 at 19:50
  • oh, so how can I correctly import the root? Could you show me the full command? Thanks. – David Lew Apr 18 '22 at 20:07
  • `export const root = createRoot(container);`, then `import { root } from 'path/to/the/file'` – Nicholas Tower Apr 18 '22 at 20:35
  • Thank you so much! Nicholas. one more question, if we only want to unmount one component, does that mean we need to create a new container in HTML and put it in a new root inside the index js. Then put the component we want to unmount inside the new container? – David Lew Apr 18 '22 at 21:24

0 Answers0