react-select: Warning: `ref` is not a prop

Hello,

I am using ref in <Select.Creatable ref={(node) => this.selector = node} /> and getting this warning: CreatableSelect: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 44
  • Comments: 15 (2 by maintainers)

Commits related to this issue

Most upvoted comments

Any updates regarding this?

I am also seeing this warning in the console, it would be great to be able get rid of it.

This is with react 16.2.0 & react-select 1.2.0

+1

Sorry for that little outburst, lol. I solved my issue using React.forwardRef (https://reactjs.org/docs/forwarding-refs.html).

I think the fact that multiple people reported this issue, without a fix ever being pushed, is an indication that “this issue is still relevant.”

I am also seeing this error, but oddly, only via react-virtualized-select. When I use the component directly, it presents no problems.

The error, as far as I can tell, refers to the ref: PropTypes.func on line 293. When I remove it, the problem goes away.

As a temporary solution, you can wrap Creatable in class-based component like this:

import { Creatable as ReactSelectCreatable } from 'react-select'
class Creatable extends React.Component {
  render() {
    return <ReactSelectCreatable {...this.props} />
  }
}

Or wrap in toClass, if you are using recompose

Hello -

In an effort to sustain the react-select project going forward, we’re closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren’t using the latest version of react-select please consider upgrading to see if it resolves any issues you’re having.

However, if you feel this issue is still relevant and you’d like us to review it - please leave a comment and we’ll do our best to get back to you!

#1646 appears to be causing warnings for me (react-select@1.1.0, react@15.6.2). I’m using ref={r=>this.selector = r} and getting:

Warning: CreatableSelect: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

I believe this is because ref is reserved, so you can’t really pass it through like you are. If you renamed it to selectRef for Creatable (and updated the documentation for this exception to the Select API) I believe that would solve the issue.

My code seems to still work ok (it was working before upgrading from rc10), but I’d like to get rid of the warning if possible.