How to use ref in (conditional render)

Question

I want to use ref, however I am not able to use this in the conditional rendering which is initially false.

constructor(props) {
    super(props);
    this.state = { 
      filterActive: false,
    }
    this.firstRef = React.createRef();

}

If I use ref in this :-

{this.state.filterActive ?
    <label ref={this.firstRef}>Time Range</label>
:null}

The ref is null.

Answer 1

How about something Like this:

// directly assign the element to this.firstRef
// instead of doing it in the constructor
    <label
      ref={(elem) => (this.firstRef = elem)}
      style={{display: this.state.filterActive ? 'inline-block' : 'none'}}
    >
      Time Range
    </label>

and when using this.firstRef you put you work inside an if like this:

if (this.firstRef) {
// your work
}