Stateless customInput?

I’m trying to pass my existing Input to <DatePicker /> but it happens to be a stateless component. This seems to create two errors for me.

One is this

warning.js:36Warning: Stateless function components cannot be given refs (See ref "input" in Input created by t). Attempts to access this ref will fail.

The other is this, which seems related to #694

Uncaught TypeError: Cannot read property 'focus' of null
    at t.n.setFocus (react-datepicker.min.js:1)
    at react-datepicker.min.js:1

I’m not sure how best to proceed. Has anyone else encountered this scenario?

[jmlivingston]

Building on @mfalade and @hiranvikas77, a full example:

BTW: Works flawlessly if you want to use Reactstrap. Just import Input from reactstrap/lib/Input, then replace input with Input. Of course the popup styles are a bit different.

import React, { forwardRef, useState } from 'react'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

function Example() {
  const [startDate, setStartDate] = useState(new Date())
  const ref = React.createRef()
  const CustomDateInput = forwardRef(({ onClick, value }, ref) => (
    <input onClick={onClick} value={value} onChange={onClick} ref={ref} />
  ))
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      customInput={<CustomDateInput ref={ref} />}
    />
  )
}

export default Example

[mfalade]

You can still use a SFC as your CustomDateInput if you want.
The solution is to use React’s forwardRef.

You can update your ./customDateInput.js file to look like this…

import React, { forwardRef } from 'react';

const CustomDateInput = (props, ref) => {
  // blah blah
};

export default forwardRef(CustomDateInput);

Note that customDateInput cannot have propTypes or defaultProps declarations since it isn’t exactly a React component at this point. It’s merely serving as a render function. (You’d get console warnings if specify propTypes or defaultProps)

Resources:

• https://reactjs.org/docs/forwarding-refs.html
• https://buildreactapps.com/how-to-pass-ref-using-react-forwardref/