I have a class based component by itself that is warning

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

In addition I am not able to reference the ref

Here is a code sandbox. https://codesandbox.io/s/inspiring-currying-023wf?file=/src/App.js

CodePudding user response：

Turns out Row within reactstrap must be a functional components.

Therefore instead of

<Row ref={this.myRef}>
  ...
</Row>

I had to use

<div ref={this.myRef}>
  <Row>
    ...
  </Row>
</div>

CodePudding user response：

The Row component within react strap is a functional component and therefore is not an instance so it cannot have the ref= attribute.

Check out the documentation here. https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components. And this link as well https://reactjs.org/docs/forwarding-refs.html if you want to use refs on that particular component.

You could also choose to override the component with a custom class component if you want to expand the usage.