question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Update react-redux docs for forwardRef

See original GitHub issue

Re this issue: https://github.com/reduxjs/react-redux/issues/1118

After rereading the react redux docs, the reason I thought withRef could only be used with connectAdvanced is because withRef only appears under [connectOptions] for connectAdvanced, and not regular connect. Had I read more carefully about connect I would’ve seen that it’s a wrapper around connectAdvanced but I don’t think it’s obvious that withRef/forwardRef can be passed to just connect as it’s not under [options]

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
adrienlamottecommented, Apr 11, 2020

A working solution with a functional component and connect :

const YourConnectedFC: FC = forwardRef((props, ref) => {
    <Input ref={ref} />
});

export default connect(
    null, // mapStateToProps
    null, // mapDispatchToProps
    null, // mergeProps
    { forwardRef: true }, // options
)(YourConnectedFC);
6reactions
markeriksoncommented, May 30, 2019

@luigimannoni : please look at the API docs more carefully:

https://react-redux.js.org/api/connect

The signature is:

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)
Read more comments on GitHub >

github_iconTop Results From Across the Web

Forwarding Refs - React
Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary...
Read more >
Connect | React Redux
The connect() function connects a React component to a Redux store. It provides its connected component with the pieces of the data it...
Read more >
Using forwardRef in React to clean up the DOM
In this tutorial, we'll review the concept of forwarding refs in React and how it helps us manage interactions with the DOM.
Read more >
Why is React.forwardRef preventing this HOC from rendering ...
I came across this behavior while working on this epic react lesson, and after re-reading the react docs on both forwardRef and HOCs...
Read more >
Get Started | React Hook Form - Simple React forms validation
Installing React Hook Form only takes a single command and you're ready to roll. ... forwardRef to pass the ref too const Select...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found