Can’t use react-input-mask in strict mode

Question

550.50K viewsSeptember 10, 2022javascript reactive reactjs web

0

Robert Vitoriano September 7, 2022 0 Comments

Im trying to use react-input-mask, but having no success, I can’t type anything. I was getting an error related to React Strict mode, but solved it with Ref Fowarding. Now I see no errors, but still can’t get any input from keyboard, what am I doing wrong ?I’m using a functional component This is my code:

 import InputMask from "react-input-mask";


     const InputMasked = React.forwardRef((props, ref) => (
        <InputMask
          placeholder="Digite seu nome"
          className="register-input"
          mask="99/99/9999"
          value={name}
          onChange={(e) => setName(e.target.value)}
          type="text"
        />
      ));
    
      const ref = React.createRef();
    
                <InputMasked
              placeholder="Digite seu nome"
              className="register-input"
              mask="99/99/9999"
              value={name}
              onChange={(e) => setName(e.target.value)}
              type="text"
              ref = {ref}
            />

1 Answer

score 0 · Answer 1 · 2022-09-08T09:52:50+00:00

This works for me:

import InputMask from 'react-input-mask';

export default class TestApp extends React.Component {
    inputMask;
    render() {
        return (
            <InputMask mask="99/99/9999" ref={this.inputMask} />
        )
    }
}