I’m currently having trouble with the phone component I’m writing. To be extra vague about it, on my onChange, I’m using a function to move to the next text box. However, when I use my data handler function to raise the value to the parent, it doesn’t work. In addition, by adding my data handler to the individual text boxes, it breaks my next Box function.

//dataHandler => raises state data to parent
//nextBox => moves focus to next text box 
 
//onChange should be here
 {
    dataHandler(dataProp, e); 
    nextBox(1);
} />

In the code above, either nextBox works alone, or if I add my handler, then neither work.

I’m also wondering about practices. On other forms, I put this type of handler on single boxes, and it works fine. Since my phone input component has multiple boxes, I’m thinking that onChange won’t work exactly the same regardless.

Any advice, tips, or need to know info?

Ps: I’m on mobile, so I greatly simplified the code I’m using, and the formatting is wonky. Assume that there’s an onChange before the brackets with an (e) =>. My app or lemmy is deleting it on submission.