A React app with moving input focus after character limit
Solution retrospective
I initially wrote this in normal HTML/CSS/JS but decided to switch over to React. I'm still learning it and decided to try out React hook form for this challenge.
I really like how the app came out. Some of the features include:
- move focus to next input when char limit reached
- [update] single digits convert to two digits when leaving input (blur event)
- using setInterval and promises to get the count up effect.
- responsive mobile first design
I welcome any feedback and pointers to good React practices. Major challenge I faced was letting go of the responsibility of updating the DOM and let React handle it.
ie. I'm using document.getElementById to move the focus to the next input when the character limit is reached but doesn't feel very React like. Is there another way?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @NizarMjr
@Arturo I like what you have done it's nice work Getting element from DOM with its ID is useful to focus on input however there is useRef hook could make same work ex : const inputRef = useRef(null) <input ref={inputRef} /> function () { //your js logic inputRef.current.focus()}
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord