[Solved] ref not working with React Redux connect

When you are working with the React Redux `connect()` function you may face an issue to use the ref in the React component. So in this short article, we’ll show you how to access ref in class based component.

Checkout more articles on ReactJS

• Drag and Drop sortable list in React
• Routing in React using React Router v6
• Input validation in React
• How to add a loading spinner in React

Solution

Here we want to clarify that this solution is useful for the class based component. So let’s assume that `MyComponent` is a class based component and we are using the react-redux in this component.

You can check the options for the `connect()` method in redux. You need to set `forwardRef: true` to access ref in a class based component.

connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(MyComponent)

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂