React: BUG: React.findDOMNode(this) always null in higher-order-component (0.13.3)

[gilbox]

const higherOrderComponent = (Component) => React.createClass({
  componentDidMount() {
    console.log( React.findDOMNode(this) ); // => null
  },

  render() {
    return <Component {...this.props} />;
  }
});

[browniefed]

Does giving <Component> a ref and passing that into findDOMNode work?

[gilbox]

Does giving a ref and passing that into findDOMNode work?

no

[gilbox]

need a demo

[browniefed]

@gilbox seems to work http://jsbin.com/tuxupevefi/2/edit?html,js,output

[gilbox]

The bug only happens if the wrapped component returns null the first time render() is called.

[browniefed]

@gilbox yeah that sounds like correct behavior to me

[gilbox]

It's not correct, but I don't think I'm explaining it very well (here is correct behavior: http://jsbin.com/dobagekaja/1/edit?html,js,output)

I can't reproduce a simple version of this bug, but returning <noscript /> instead of null from my wrapped component is simple enough for now.

[sophiebits]

@gilbox Can you try to make a minimal repro case? If this is a React bug I'd like to fix it.

[syranide]

@gilbox I fail to see the problem in your fiddle, it outputs null for as long as Foo is returning null (it has no associated DOM node), but when Foo starts returning a div then associated DOM node is output in the console... ?

[gilbox]

I fail to see the problem in your fiddle

That's why I closed this issue ;-)

The code in my application is very similar to the link I posted, but for some reason I haven't been able to replicate the bug in a simple case.

[syranide]

@gilbox Do you mean that findDOMNode returns null for a component even though it has rendered an element, so if you replace null with <noscript /> then it actually works and returns the correct node (not noscript)? I.e. something like #2353 (that was supposedely fixed)?

[gilbox]

Do you mean that findDOMNode returns null for a component even though it has rendered an element, so if you replace null with <noscript /> then it actually works and returns the correct node

bingo. (but I can't prove it yet :-/ )

[gilbox]

Update: the bug is not in react :dancer:

[ol-lo]

@gilbox, I met the same issue.
Could you describe cause of bug?

[gilbox]

I did something wrong in my own code @olegerm but I don't remember what that was anymore.

[romainbessugesmeusy]

For the record, here's an explanation for anyone's looking for a clue :

This is what may cause a "bug" : componentDidMount is called, but because of the early return null, no DOMNode could be found by ReactDOM. I had to remove the condition to get a correct behaviour.

```javascript
render() {
if (this.state.isCheckingConsent) {
return null;
}
return (
saveConsent={this.saveConsent.bind(this)}
{...this.props}
{...this.state}
/>
);
}