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 — vsync
– vsync, Commented Oct 27, 2019 at 11:04

nikjohn · Accepted Answer · 2018-06-12 15:24:32Z

39

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, 2018 at 15:24

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

trixn Over a year ago

This is also in the docs.

chengsam Over a year ago

For v4 and above, use the ref prop directly instead.

Mohammad Kermani Over a year ago

I got a warning from Emotion that the innerRef is going to be deprecated in the future

Dimitri Kopriwa Over a year ago

does it work in react native ? answer: no

Stathis Ntonas Over a year ago

@DimitriKopriwa did you find a solution on how to type ref on react-native?

|

mkg · Accepted Answer · 2020-06-18 12:45:25Z

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 · Accepted Answer · 2022-07-19 20:55:36Z

1


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

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

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

edited Jul 19, 2022 at 20:55

answered Jul 19, 2022 at 20:44

SID JO

212 bronze badges

1 Comment

Saeed Zhiany Over a year ago

Please read How do I write a good 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

Collectives™ on Stack Overflow

Using 'ref' on React Styled Components is not working

3 Answers 3

6 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Linked

Related