React-day-picker: Stateless function components cannot be given refs

[dmtrKovalenko]

I have started using your awsome picker and got the following error

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail. Check the render method of 'DayPickerInput'.
Also I am getting error Uncaught TypeError: Cannot read property 'focus' of null

Seems that DayPickerInput is a stateless component, but it defines a ref.

Environment

| Tech | Version |
|---------------------|---------|
| React-day-picker | 7.0.5 |
| React | 16.2.0 |
| Browser | Chrome 63 |
| Platform | MacOS |

[gpbl]

Hi, could you reproduce this in a code sandbox? The component is not stateless, actually.

[Ronny25]

Having the same issue.
React-day-picker v7.0.6
React v16.2.0
Browser v63
Platform Ubuntu 16.04

Using custom input component as a bound function in constructor but I don't think that's the point.

[gpbl]

Please an example to reproduce this 🙏🏽

[rodallanmac]

Hi @gpbl

My problem is that I need to use custom refs in the DayPickerInput so that onSubmit picks up the changed value. But it seems that they get appended by the component logic? Does that help

              <DayPickerInput
                onDayClick={this.handleDayClick}
                placeholder= {doc && doc.dateEnd}
                ref={dateStart => (this.dateStart = dateStart)}
                inputProps={{
                  name: 'dateStart',
              }}
              />

[TrySound]

@rodallanmac Why not listen onChange, write to local state and collect data from state on summit?

[rodallanmac]

Hi @TrySound

You a star! Whilst this does work it would be so much cleaner if @gpbl allowed us to attach a custom ref to his input component that is generated with DayPickerInput.

  handleDayChange(selectedDay ) {
    this.setState({
      selectedDay,
    });
    let v = document.getElementById('thisStartDate')
    v.value = selectedDay.toLocaleDateString()
  }

[gpbl]

it would be so much cleaner if @gpbl allowed us to attach a custom ref to his input component that is generated with DayPickerInput.

@rodallanmac please send a PR, thanks!

[KumarAbhirup]

Same problem here. I am not using any kinda ref.

                     <DayPickerInput 
                        component={props => (
                          <Form.Input label='Birthdate' onChange={this.handleChange} {...props} disabled />
                        )} 
                        formatDate={formatDate}
                        parseDate={parseDate}
                        placeholder={`${formatDate(new Date())}`}
                        onDayChange={this.handleDayChange}
                        value={this.state.birthday}
                      />

This is the error: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Need help.

[darrenterhune]

@KumarAbhirup try this

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class BirthDateCalendar extends Component {
  static propTypes = {};

  render = () => (
    <Form.Input label='Birthdate' onChange={this.handleChange} {...this.props} disabled />
  );
}

<DayPickerInput component={BirthDateCalendar} />

[mnsr]

I know this is an old issue, but this came up when i googled the error. It's solved by using React.forwardRef. Just thought it'd help someone else looking to solve this error.

e.g.

```javascript
const MyDatePicker = () => {

const renderInput = React.forwardRef(props => {

});

return (

)

}

[redaxmedia]

No luck with React.forwardRef but inputProps={ { ref: null } } solved it for me...

@gpbl Please reopen this issue... thanks

[MayaraRMA]

Thanks @redaxmedia, I had the same problem.