Warning: Stateless function components cannot be given refs (See ref "picker" in Input created by null). Attempts to access this ref will fail.

[adrienharnay]

Hi,

Since I updated React to the latest version (15.5.4) and also react-bootstrap-daterangepicker (3.4.0), I got this error:

Warning: Stateless function components cannot be given refs (See ref "picker" in Input created by null). Attempts to access this ref will fail.

Stacktrace: (even though looking at the code it is pretty obvious where it coming from).

printWarning    @   warning.js:36
warning @   warning.js:60
attachRef   @   ReactCompositeComponent.js:850
addComponentAsRefTo @   ReactOwner.js:69
attachRef   @   ReactRef.js:23
ReactRef.attachRefs @   ReactRef.js:42
attachRefs  @   ReactReconciler.js:23
notifyAll   @   CallbackQueue.js:76
close   @   ReactReconcileTransaction.js:80
closeAll    @   Transaction.js:206
perform @   Transaction.js:153
perform @   Transaction.js:140
perform @   ReactUpdates.js:89
flushBatchedUpdates @   ReactUpdates.js:172
closeAll    @   Transaction.js:206
perform @   Transaction.js:153
batchedUpdates  @   ReactDefaultBatchingStrategy.js:62
enqueueUpdate   @   ReactUpdates.js:200
enqueueUpdate   @   ReactUpdateQueue.js:24
enqueueSetState @   ReactUpdateQueue.js:219
ReactComponent.setState @   ReactComponent.js:63
(anonymous) @   Router.js:129
(anonymous) @   createTransitionManager.js:283
(anonymous) @   createTransitionManager.js:112
done    @   AsyncUtils.js:79
(anonymous) @   AsyncUtils.js:85
(anonymous) @   routes.js:50
(anonymous) @   BusinessesPage.js?c69c:3

This error is making all the pages where the component is included crash... Could you please take a look?

Thanks in advance,

[skratchdot]

@Zephir77167 - Sorry about this. I should have bumped to a new major version b/c the PR's I merged in seem to have broken things for people. Can you post how you are using the component?

I recently pulled in someone's code that changed this line: https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/lib/index.js#L154

That means that the DateRangePicker picker component always needs to be called with 1 single child now.

Works:

<DateRangePicker>
  <div>One child</div>
</DateRangePicker>

Fails (I think):

<DateRangePicker>
  <div>child 1</div>
  <div>child 2</div>
</DateRangePicker>

Not sure if this is related to the issue you are seeing.

[adrienharnay]

Thanks for the quick answer!

I am using it like so:

<BootstrapDateRangePicker
      ...
    >
      <Input
        ...
      />
    </BootstrapDateRangePicker>

Input being:

const Input = ({ className, ...otherProps }) => (
  <input className={className ? `${styles.input} ${className}` : styles.input} {...otherProps} />
);

So no multiple children here

[adrienharnay]

I'm downgrading for now as this is quite breaking. Don't hesitate to ask if you need more information to help resolve the problem!

[henriquesa]

Hey @skratchdot, thanks for the project.

I should have bumped to a new major version b/c the PR's I merged in seem to have broken things for people.

Agreed here. Was also affected by this. Perhaps a good course of action right now would be to revert 3.4 to 3.3.x code and move the breaking changes to 4.x? Also the necessity of new peerDependencies should maybe justify the major version bump on its own.

Just a few thoughts, let me know if I can be of any help.

[adrienharnay]

Hi, any news on this? 3.4.0 doesn't work for me as stated in previous comments.

[schneckentempo]

I just wrapped my component into another div, does the trick

[skratchdot]

closing this due to inactivity. please re-open if this is still an issue in v6.0.0 or greater