Uncaught Error: 'node' must be a RefObject when passing a React.RefObject

Question

I'm trying to pass in a reference to the exportComponentAsPNG function.

return (
    <div id="grid">
        <div id="pixels" ref={this.gridRef}>{rows}</div>

        {(() => {
            if (shouldExport) {
                exportComponentAsPNG(this.gridRef);
            } else {
                console.log("shouldn't export");
            }
        })()}

        <button onClick={() => exportComponentAsPNG(this.gridRef)} className="mocha-button">Export</button>
    </div>
)

this.gridRef is defined in the constructor as:

constructor(props) {
    super(props);
    this.gridRef = React.createRef();
}

The exportComponentAsPNG(this.gridRef) works with the button component. However, when I try to call it in the if-block it gives me the following error:

Uncaught Error: 'node' must be a RefObject
    at d (index.js:171:1)
    at p (index.js:171:1)
    at Grid.js:38:1
    at Grid.render (Grid.js:42:1)
    at finishClassComponent (react-dom.development.js:20561:1)
    at updateClassComponent (react-dom.development.js:20507:1)
    at beginWork (react-dom.development.js:22440:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)

Could you explain why the call from the if-block is different and how to fix it because in my case it would not be ideal to use the button implementation; I would prefer to call it from the if-block.

Answer 1

The girdRef.current is null in the first render. Even if you make it works with null checks, it is not a good practice to use a function like that.

You should use componentDidMount or componentDidUpdate to write your action based on your needs.

componentDidUpdate() {
  if (shouldExport) {
    exportComponentAsPNG(this.gridRef);
  } else {
    console.log("shouldn't export");
  }
}