Can't access innerRef of SelectContainer

[florinpavel22]

Hi, I have this custom SelectContainer component.

import React, { useCallback } from 'react';
import { components } from 'react-select';

export function SelectContainer(props) {
  const { selectProps: { controlRef }, innerRef, children } = props;

  const setRef = useCallback((node) => {
    innerRef(node);
    controlRef(node);
  }, [ innerRef ]);

  return (
    <components.SelectContainer { ...props } innerRef={ setRef }>
      { children }
    </components.SelectContainer>
  );
}

And I cannot access its ref. I tried logging to the console, but nothing.

[Rall3n]

@florinpavel22

A look into the documentation would have been enough to see that the SelectContainer component has no prop called innerRef.

I suggest you use the prop innerProps instead to assign the reference.
innerProps is a set of props that is being spread onto the underlying element.

const SelectContainer = ({innerProps, ...props}) => {
  /* ... */

  return <components.SelectContainer
    {...props}
    innerProps={{...innerProps, ref: YOURREF}}
  />
}

[florinpavel22]

@Rall3n Hey, thanks, I will give your suggestion a try.
If you don't mind, can you post the part of the documentation where it says SelectContainer doesn't have an innerRef? I've been scrolling through it for days, but I didn't come to read this part.

[Rall3n]

https://react-select.com/props#components has a list of all replaceable components and their props.

The list of props for the SelectContainer component is third to last on this page.

[florinpavel22]

@Rall3n Great, thank you very much for your help!
For some reason, despite visiting that page a few times, I haven't considered looking at the list of props SelectContainer takes.