TypeError: Cannot read property 'refs' of undefined - Next.js App & React

Question

My /pages/index.js

import { showFlyout, Flyout } from '../components/flyout'

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  showFo() {
    // Unhandled Runtime Error
    // TypeError: Cannot read property 'refs' of undefined
    // Source
    showFlyout(<Flyout title="My Flyout"><p>My <strong>FLYOUT</strong>!!!</p></Flyout>, this.refs.root)
    //                                                                                      ^
    console.log(this) // undefined
  }

  render() {
    return (
      <div ref="root">
        ...
        <button onClick={this.showFo}>Click me!</button>
      </div>
    )
  }
}

My /components/flyout.js

import styles from './flyout.module.css' // No errors here
import ReactDOM from 'react-dom'

class Flyout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flyoutEleClassName: styles.flyout,
        };
    }

    ...

    render() {
        return (
            <div className={this.state.flyoutEleClassName} ref={(ref) => { this.flyoutEle = ref }}>
                ...
            </div>
        );
    }
}

function showFlyout(flyout, target) {
    ReactDOM.render(flyout, target) // This is the function I used in `/pages/index.js`
}

export { showFlyout, Flyout }

This is the error:

Unhandled Runtime Error TypeError: Cannot read property 'refs' of undefined

Source

showFlyout(<Flyout title="My Flyout"><p>My <strong>FLYOUT</strong>!!!</p></Flyout>, this.refs.root)
                                                                                        ^

Answer 1

Here you are referring this.flyoutEle :

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

 <div className={this.state.flyoutEleClassName} ref={(ref) => { this.flyoutEle = ref }}>
            ...
        </div>

then you should try to access the value with this.flyoutEle.current instead of this.refs.root

Let me know if this works for you!!