react-redux-v6: withRef is removed. To access the wrapped instance, use a ref on the connected component

2 8 picture 2 8 · Dec 17, 2018 · Viewed 17.4k times · Source

I want to call a function from a connected component using ref, so I used before from withRef: true in connected component:

export default connect(
  mapStateToProps, mapDispatchToProps, null, {withRef: true}
)(InviteReceiverForm)

and in the presentational component:

<ExampleComponent 
  ref={ cmp => { if(cmp) { this.individualSenderFormRef = cmp.getWrappedInstance() }} />

But after I updated to react-redux v6, I got this error:

withRef is removed. To access the wrapped instance, use a ref on the connected component

How can I use ref in react-redux v6?

Answer

Ian Kemp picture Ian Kemp · Dec 17, 2018

https://github.com/reduxjs/react-redux/releases/tag/v6.0.0

The withRef option to connect has been replaced with forwardRef. If {forwardRef : true} has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.