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.
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");
}
}