Using 'ref' on React Styled Components is not working

Question

I am having difficulty using refs with Styled Components. When I try to access them in my class methods like below, I get the following error:

Edit.js:42 Uncaught TypeError: this.....contains is not a function

  constructor(props) {
    ....
    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
   }
----------
  setWrapperRef = (node) => {
    this.wrapperRef = node;
  }
  handleEdit = (e) => {
    e.preventDefault();
    this.props.onEdit(this.props.id, this.state.title);
  }
----------
<Wrapper onSubmit={this.handleEdit} ref={this.setWrapperRef}>
  ...
</Wrapper>

I found the code from this question

What am I doing wrong here?

★ As of *styled-components* `v4` using the `ref` prop works fine → [Docs link](https://www.styled-components.com/docs/advanced#refs) — vsync, Oct 27 '19 at 11:04

score 35 · Answer 1 · answered Jun 12 '18 at 15:24

35

I found the answer myself. The solution is to use innerRef instead of ref as the ref itself points to the Styled Component and not the DOM node.

A detailed discussion can be found on GitHub

answered Jun 12 '18 at 15:24

nikjohn

17,954
13
49
82

3

[This is also in the docs](https://www.styled-components.com/docs/advanced#refs). – trixn Jun 12 '18 at 15:29
3

For v4 and above, use the `ref` prop directly instead. – chengsam Apr 30 '19 at 06:53
I got a warning from Emotion that the `innerRef` is going to be deprecated in the future – Mohammad Kermani Oct 21 '21 at 17:05

score 2 · Answer 2 · answered Jun 18 '20 at 12:45

If you extend another component in styled ref forwarding requires efford. so my solution was extending that component with as prop.

before:

import { useRef } from 'react'
import styled from 'styled-components'

const Card = styled.div``
const Block = styled(Card)``

const Component = () => {
    const ref = useRef(null);
    return <Card ref={ref} />
}

after:

import { useRef } from 'react'
import styled from 'styled-components'

const Card = styled.div``
const Block = styled.div``

const Component = () => {
    const ref = useRef(null);
    return <Block as={Card} ref={ref} />
}

Using 'ref' on React Styled Components is not working

2 Answers2

Linked