React.forwardRef Causes Error with Styled Component

Question

I am running React 16.3.1 and Styled Components 3.2.5 currently and am hitting an issue trying to use React.forwardRef.

I have an Input component that is comprised of a wrapper div that holds the label and input field. However, I want to be able to forward a ref directly to the input field and not have to traverse to it via the primary wrapping div.

const Input = React.forwardRef((props, ref) => (
  <Wrapper>
    <Label htmlFor={props.id} required={props.required}>
      {props.label}
    </Label>

    <InputField
      id={props.id}
      ...
    />
  </Wrapper>
));

That is a simplified version of my component. However, this creates the following error:

Uncaught Error: Cannot create styled-component for component: [object Object]

Maybe upgrading Styled Components to v4 would help? But is there any solution before upgrading that I haven't found yet?

Thank you.

Doubleheader

Answer 1

As explained in related issue, there is blocking React Redux issue that is expected to be closed with this PR.

A workaround is to use an approach that was used before React 16.3 forwardRef and use custom prop instead of ref to forward refs:

const Input = ({forwardRef, ...props}) => (
  <Wrapper>
    <Label htmlFor={props.id} required={props.required}>
      {props.label}
    </Label>

    <InputField
      ref={forwardRef}
      id={props.id}
      ...
    />
  </Wrapper>
));

Hedonic

Thanks a lot! I had to modify your answer slightly since my version of Styled Components still expected ìnnerRef` as opposed to ref. Otherwise, I was able to make this work. – Doubleheader

Answer 2

Why <Wrapper {...rest}>?

I thing pass ref to Wrapper is a correct way:

<Wrapper ref={ref}>

Acarology

Sorry, that was a carry over from old code. Unrelated. But I don't want to put the ref on the Wrapper. I would need it on the Input field. – Doubleheader