Text-mask: Style component, TypeError: Cannot read property 'value' of undefined

[kenpeter]

I tried to use style component and gets this error:

This is simple create react app code:

import React from "react";
import MaskedInput from 'react-text-mask';
import styled from 'styled-components';
import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe'

const MyStyledInput = styled.input`
  background: red;
`;

function App() {

  const autoCorrectedDatePipe = createAutoCorrectedDatePipe('dd/mm/yyyy');
  return <div className="App">
    <MaskedInput
      mask={[/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]}
      placeholder={'DD/MM/YYYY'}
      pipe={autoCorrectedDatePipe}
      guide={true}
      keepCharPositions={true}
      render={(ref, props) => (
        <MyStyledInput innerRef={ref} {...props} />
      )}
    />
  </div>;
}

export default App;

full code here:
https://github.com/kenpeter/radio-button/tree/auto-date

[Luisdv93]

Did you manage to fix the issue? I'm having the same problem.

[vladka]

same issue :-( ... I have no idea how to fix it

[s3vi26]

same issue :-( ... I have no idea how to fix it

<MaskedInput 
mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]} 
placeholder="Enter a phone number" 
id="my-input-id" 
render={(ref, props) => <MyStyledInput ref={ref} {...props} />} 
/>

const MyStyledInput = styled.input`
  background: papayawhip;
`;

NOTE: using ref={ref} not innerRef={ref}