CODEWITHSUNDEEP
javascriptreactjs
user6329530
user6329530

Reputation: 734

NotFoundError: Node was not found on removing react component

I want to display a component according to a state variable in the context provider. When I load this page, the closed is shown (fullRender is false initially). Clicking the button to display it, I see the canvas in the dom. When I click the Remove button, I call removeFullRender on the context which sets it false again.

const launchRender = () => {
    setFullRender(true);
}

const removeFullRender = () => {
    setFullRender(false);
}

As soon as I do this, react crashes (= shows white page and throws error in react-dom.development.js) with NotFoundError: Node was not found instead of showing the closed div again.

The full render component:

const FullRender = (props) => {
    const context = useContext(FabricContext);
    const [canvas, setCanvas] = useState();

    useEffect(() => {
        if(!context.fullRender){
            return
        }
        setCanvas(new fabric.Canvas("full-canvas", {
            selection: false,
        }));
        console.log(context.fullRender);
    }, [context.fullRender]);

    return (
        <>
        {context.fullRender ?
            <>
            <canvas
                style={props.style}
                id="full-canvas"
            >
            </canvas>
            <Button onClick={context.removeFullRender}>X</Button>
            </>
            : <div>closed</div>
        }
        </>
    );
}

Upvotes: 0

Views: 584

Answers (1)

Pavlos Karalis
Pavlos Karalis

Reputation: 2976

I got it working in this example:

https://codesandbox.io/s/dank-frog-9wcgc?file=/src/App.js

The use of react fragments around the canvas caused the error (unsure why)

Changing to another tag should resolve it:

<div>
   <canvas
      style={props.style}
      id="full-canvas"
   >
   </canvas>
   <Button onClick={context.removeFullRender}>X</Button>
</div>

Upvotes: 1

Related Questions