card-react icon indicating copy to clipboard operation
card-react copied to clipboard

Incompatible with redux

Open dlong500 opened this issue 8 years ago • 2 comments

I'd like to use this component, but the way it handles the input values is incompatible with redux (and basically any state-management).

Trying to tie the input fields to some type of controlled state management results in the React warning:

CardReactFormContainer contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.

The inputs don't work correctly either, as the code that handles input validation and the "controlled" nature of the input once it is tied to some state management interfere with each other.

Ideally it would be nice to have this project move to using redux behind the scenes for state management, but at the very least it would be great if it could be made to not interfere with those of us using redux.

dlong500 avatar Feb 19 '17 05:02 dlong500

@dlong500 I had the same problem and for now I am using https://github.com/amarofashion/react-credit-cards which is easy to integrate with Redux.

davincho avatar Feb 21 '17 12:02 davincho

The component manages it's own state which you can access through a ref. The docs don't specify this however:

<CardReactFormContainer container="card-wrapper" ref={(ref) => this.ccForm = ref } >

From there you can access for example: this.ccForm.inputsValues.cvc or whatever you passed in as the name for that input. Hope this helps.

jangsi avatar Aug 15 '17 14:08 jangsi