Material-ui: React 16 not compatible with text-masking using react-text-mask

[adeelibr]

I updated my code to react v16 react-dom v16, using your library which is amazing. But I keep on getting this warning message. Which is as follows.

warning.js:33 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail

Either we shouldn't use the ref props in the component or convert it into a smart component. What do you think? I really look forward to your response.

[adeelibr]

Hi,

I figured this issue out, with React 16. In order to use react-text-mask library for masking. We need to wrap our input component which uses the masking component. We need to wrap it in a smart component instead of a dumb component.

Can I make a PR to update the documentation on how to use react-text-mask library according to React16 guidelines.

[oliviertassinari]

Can I make a PR to update the documentation on how to use react-text-mask library according to React16 guidelines.

@adeelibr This would help a lot 👍

[adeelibr]

Can you kindly guide me a little bit on how to make a PR? this is my first time working on an open source project.

[oliviertassinari]

@adeelibr Don't miss our CONTRIBUTING.md guidelines.

[oliviertassinari]

We have upgraded all our dependencies to react@16. This issue should be solved. Have a look at how we handle the component now.

[oliviertassinari]

But you are right, the Input component of Material-UI is using a ref to perform the dirty logic. We had to use a class component:

https://github.com/callemall/material-ui/blob/6ab285eaab6ef00bcbb0b202f0eb5829c18cf6ce/docs/src/pages/demos/text-fields/FormattedInputs.js#L22

[adeelibr]

Hi,
I am sorry for the late response. I am going through CONTRUBITING.md file & I am studying the material UI code as well. So that I can start contributing as well.

[adeelibr]

Yeah, this was the exact approach that I had to follow in order to do MASKING in my project.

[oliviertassinari]

@adeelibr No need to make a PR. The issue has been resolved. Thanks for the intention :).

[adeelibr]

I'd still like to start contributing @oliviertassinari in an open source project. I love react & material-ui library is one of my very favorites. I'd like to start from here. I just don't know how. This is my first time.

[oliviertassinari]

@adeelibr I'm happy to hear it :). You can start by having a look at our good first issue tag. This tag have been designed for people looking into making their first contribution.

[adeelibr]

@oliviertassinari Thank you bro. I'll study this link and hopefully make my first contribution soon. :)