Wrapped component by injectIntl has state always to null

[manuelmazzuola]

I've encountered an issue while using the formatMessage method.
I've wrapped a component called ChildComponent with injectIntl.

ChildComponent.propTypes = {
    intl: intlShape.isRequired
}

export default injectIntl(ChildComponent)

Then I've used the component into another component called FatherComponent.

<ChildComponent ref="child"></ChildComponent>

The issue is that when accessing to the ChildComponent from the FatherComponent the state is always null, this.refs.child.state is always null.
I'm using the new beta version.

Instead the state is populated correctly if ChildComponent is not wrapper by injectIntl.

[ericf]

Use:

export default injectIntl(ChildComponent, {withRef: true});

Then you can access it via the following from your FatherComponent:

this.refs.child.getWrappedInstance().state

[manuelmazzuola]

Thank you!

[manuelmazzuola]

@ericf Doesn't work like you said.

 this.refs.child.getWrappedInstance is not a function

But I can access to state by this way.

this.refs.child.refs.wrappedElement.state

[ericf]

It does on 2.0.0-beta-1

[manuelmazzuola]

@ericf But I'm using the 2.0.0-beta-1 version
The version tagged with next on npm.

[ericf]

So I see an issue, I actually forgot to return the ref, but it's definitely a function: https://github.com/yahoo/react-intl/blob/master/src/inject.js#L37

[roderickhsiao]

@ericf are we publishing this change in 2.0.0-beta-1?

[ericf]

@roderickhsiao beta-2 since beta-1 was already published. I can hack-in a patch to beta-1 internally though…

[bradbirnbaum]

@ericf I also need this to work - any thoughts on publishing beta2?

[kumarharsh]

@ericf Can this {withRef: true} not be the default? I'm assuming (from my usage) that more often than not, I'd end up using withRef: true especially in Forms, etc.

Also, how would one use this with the decorator pattern?

[ericf]

@kumarharsh it's cannot be true by default because then it would fail when wrapping stateless function components. Why do you find yourself needing a direct ref to form related components?

[kumarharsh]

Ok, I understand. I was following a pattern wherein on clicking "Submit", I'd get the values from each input via their refs. Some of those inputs can be components in themselves, which may are wrapped in injectIntl()

[ericf]

@kumarharsh okay. Another approach is using an onChange callback, similar to the primitive <input> React component, and store values in the container component's state.

[kumarharsh]

Yes, I'm using that now in some places :)