Comments (3)
me too aff
from react-credit-cards.
I was able to make it work using functional component.
Instead of updating the state with an object of only one field as in the handleInputFocus and handleInputChange functions, spread your current state to get all the data and then add the new field.
This is what I have:
const [cardData, setCardData] = useState({
cvc: '',
expiry: '',
focus: '',
name: '',
number: ''
});
const handleInputFocus = (e) => {
setCardData({
...cardData,
focus: e.target.name
});
}
const handleInputChange = (e) => {
const { name, value } = e.target;
setCardData({
...cardData,
[name] : value
});
}
Hope it also works for you!
from react-credit-cards.
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"config:base"
]
}
from react-credit-cards.
Related Issues (20)
- Custom input rendering?
- CAN YOU PLEASE UPDATE REACT DEPENDENCY VERSION AS 17! HOT 4
- Card icon based on number HOT 1
- Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
- Use Mask inside input fields
- Questions about i18n and custom cards types
- react@"18.0.0" support HOT 3
- ✨✨✨✨✨ React Credit Cards - Community Packages 2023 HOT 4
- SASS migration
- Can Any body help me to use it with stripe js elements ? HOT 1
- Possibly a merger with react-credit-cards-2?
- >00 A4 04 00 OE 32 50 41 59 2E 53 59 53 2E 44 44 46 30 31 00 < 6F 30 84 0E 32 50 41 59 2E 53 59 53 2E 44 44 46 30 31 A5 1E BF OC 1B 61 19 4F 07 A0 00 00 00 03 10 10 50 OB 56 69 73 61 20 43 72 65 64 69 74 87 01 01 90 00 > 00 A4 04 00 07 A0 00 00 00 03 10 10 00 < 6F 55 84 07 A0 00 00 00 03 10 10 A5 4A 50 OB 56 69 73 61 20 43 72 65 64 69 74 87 01 01 5F 2D 02 65 6E 9F 38 18 9F 66 04 9F 02 06 9F 03 06 9F 1A 02 95 05 5F 2A 02 9A 03 9C 01 9F 37 04 9F 12 08 47 65 6D 20 56 69 73 61 9F 11 01 01 BF OC 08 9F 5A 05 40 00 36 00 36 90 00 > 80 A8 00 00 23 83 21 F6 20 C0 00 00 00 00 00 00 23 04 20 00 32 4A AB 4B 00 < 77 47 82 02 00 20 57 0E 43 77 32 00 09 80 64 30 D2 60 72 01 06 1F 5F 20 02 20 2F 5F 34 01 01 9F 10 07 06 00 12 03 A0 20 00 9F 26 08 A1 E6 86 48 1F 52 45 CA 9F 27 01 80 9F 36 02 00 OE 9F 6C 02 20 00 9F 6E 04 40 70 07 00 90.00 > 80 CA 9F 17 00 < 6A 88 > 80 CA 9F 36 00 < 9F 36 02 00 OE 90 00
- Credit 💳 card
- Uncaught TypeError: Cannot read properties of undefined (reading 'includes')
- Flip Doesn't Trigger HOT 1
- can we use this library with stripe.js? HOT 1
- Is it possible to change the 'Your name here' and 'valid thru' labels on card? HOT 2
- ModuleNotFoundError: Module not found: Error: Can't resolve 'globalthis/polyfill' HOT 3
- How the scan credit card works? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-credit-cards.