Question: I would like to require a DOM node to be a `prop` in a React component that is doing some document offset absolute positioning.

```
propTypes: {
    alignmentTarget: mountable.isRequired,
},

```

The problem is that I am using callback `ref` that store the DOM node in state and it is `null` at initiation--eventually the state gets set and the references get set, so it works for the user, but the prop validation does not work. I have read that string `ref` may be deprecated in the future for method `refs`. These used to be string `ref`.

The relevant lines of code from the parent component using `<Popover>`:

```
_containerRendered (element) {
    this.setState({container: element});
},

_buttonRendered (element) {
    this.setState({target: element});
},

render () {
    return (
        <div className="react-popover-example-wrap" ref={this._containerRendered}>
            <button id="popover-react-toggle" className="slds-button slds-button--neutral slds-button--x-small" ref={this._buttonRendered} onClick={this._handleClick}>Toggle</button>
            <Popover
                modal={this.props.modal}
                positionedTargetHorizontalAttachment="right"
                alignmentTarget={this.state.target}
                container={this.state.container}
                isOpen={this.state.isOpen}>
                <span>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</span>
            </Popover>
        </div>
    );
},

```

React 0.14 if it makes a difference.

Answer: 
If a PropType is required, then it acts a signal to the parent to yield, so to speak, until that prop is available. Once the component mounts, the `ref` function will run, set your state, then it's okay to `render` the child with its required `PropType` of `mountable.isRequired`.

```
{ this.state.target && <Popover ... /> }

```
Following @azium 's suggestion, here's what I ended up doing:

```
_containerRendered (element) {
    this.setState({container: element});
},

_buttonRendered (element) {
    this.setState({target: element});
},

render () {
    let popover = null;
    if (this.state.target && this.state.container) {
        popover = (<Popover
                alignmentTarget={this.state.target}
                container={this.state.container}
                isOpen={this.state.isOpen}
                positionedTargetHorizontalAttachment="right">
                <span>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</span>
            </Popover>);
    }
    return (
        <div className="react-popover-example-wrap" ref={this._containerRendered}>
            <button id="popover-react-toggle" className="slds-button slds-button--neutral slds-button--x-small" ref={this._buttonRendered} onClick={this._handleClick}>Toggle</button>
                {popover}
        </div>
    );
},

```