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 37 · Answer 1 · answered Jun 12 '18 at 15:24

37

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

20,026
14
50
86

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
1

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
1

does it work in react native ? answer: no – Dimitri Kopriwa Oct 04 '22 at 12:42
@DimitriKopriwa did you find a solution on how to type ref on react-native? – Stathis Ntonas Oct 25 '22 at 11:13
Either don't uise styled, or use useRef, but with createRef, forget about it, you can thumbs up here to say you have the same problem : https://github.com/styled-components/styled-components/issues/3823 – Dimitri Kopriwa Oct 26 '22 at 07:23

score 3 · 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} />
}

SID JO · Answer 3 · 2022-07-19T20:55:36.220

-1


    const StyledComponent = styled.div.attrs(({ref}) => ({
      ref: ref,
    }))``

    const App = () => {
      const anyRef = useRef();

      return <StyledComponent ref={anyRef}/>
    };

edited Jul 19 '22 at 20:55

answered Jul 19 '22 at 20:44

SID JO

1
1

1

Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. - [From Review](https://stackoverflow.com/review/low-quality-posts/32238228) – Saeed Zhiany Jul 20 '22 at 05:07

Using 'ref' on React Styled Components is not working

3 Answers3

Linked