react-input-mask Error when passing a component as children on 3.0.0

Error when passing a component as children on 3.0.0

Open CatarinaPBressan opened this issue 5 years ago • 7 comments

I'm on the latest version ("react-input-mask": "^3.0.0-alpha.2") and according to the README, I should be able to pass a component as children, like so (Form.Control is a react-bootstrap component):

<InputMask mask="999.999.999-99">
    <Form.Control type="text" inputMode="numeric" />
</InputMask>

However I'm getting a react-input-mask: children must be a function error when I leave it like that. If I change it to:

<InputMask mask="999.999.999-99">
    {() => <Form.Control type="text" inputMode="numeric" />}
</InputMask>

The component works as expected.

I don't think passing a render function is ideal in my situation, unfortunately. I'm writing a module to auto-generate forms on the fly (I need to pass the Form.Control component as a child to make things more consistent), and I couldn't find a way (yet) to build the generator in a way that is testable if InputMask only takes a function as children.