What typescript type should I use for Reactstrap Input Ref?

Question

I am linking a ref to an <Input> element but having trouble getting the right type to define it as. Currently I have this:

const [location, setLocation] = useState<GeolocationPosition>();
  const [search, setSearch] = useState<string>('');
  
  const searchInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(position => {
      setLocation(position);
    })
  }, [])

  const changeSearchHandler = () => {
    setSearch(searchInputRef.current!.value);
  }

  return (
    <>
      <Row>
        <Col className='header'>
          <h3 className='mt-3'>IsItOpen?</h3>
        </Col>
      </Row>
      <Row className='mt-4'>
        <Col lg={{ size: 6, order: 0, offset: 3}}>
          <Card>
            <CardHeader>
              <CardTitle>
                <Input type='text' ref={searchInputRef} onChange={changeSearchHandler} />
              </CardTitle>
            </CardHeader>
            <CardBody>
              Your results!
            </CardBody>
          </Card>
        </Col>
      </Row>
    </>
  );

The error is coming from the line of the <Input> telling me:

Type RefObject is not assignable to type LegacyRef

If I change the ref type to Input then I get an error on the value on the setSearch call saying:

Property "Value" does not exist on type Input

I'm not sure what the correct way to go about this is, and I don't want to use any.

Answer 1

React-strap provides another prop, innerRef to let you access the underlying <input />:

const searchInputRef = useRef<HTMLInputElement>(null);

const changeSearchHandler = () => {
  setSearch(searchInputRef.current!.value);
};

// ..

<Input
  type="text"
  innerRef={searchInputRef}
  onChange={changeSearchHandler}
/>

Whereas the ref lets you access the react-strap's Input component.