CODEWITHSUNDEEP
javascriptreactjs
Caleb Taylor
Caleb Taylor

Reputation: 3230

Ref current is null

I'm logging a ref's current when a resize event is called. When the window is resized the ref's current is null. 

class Popout extends React.PureComponent {

  constructor(props) {
    super(props)
    this.popoutRef = React.createRef() // current = null
  }

  isWithinViewPort = () => {
    console.log('popoutRef', this.popoutRef)
  }

  componentDidMount() {
    window.addEventListener('resize', this.isWithinViewPort)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.isWithinViewPort)
  }

  render() {
    const { id, children, borderColor, style, hidden, pointerLeft, pointerRight } = this.props

    if (hidden) {
      return null
    }

    return (
      <div id={id} className="popout" style={style} ref={this.popoutRef}>
        {children}
      </div>
    )
  }
}

Here's codesandbox link and the code is under ./components/Popout.js line 46.

Upvotes: 0

Views: 600

Answers (1)

Lowkey
Lowkey

Reputation: 836

What's your question?

ref only get set if your component is mounted and rendered. Your render method has this condition:

if (hidden) {
  return null
}

This means, if the Popout is hidden, there will be no ref.

Upvotes: 1

Related Questions