Learn Programming

1625 readers

1 users here now

Posting Etiquette

Ask the main part of your question in the title. This should be concise but informative.
Provide everything up front. Don't make people fish for more details in the comments. Provide background information and examples.
Be present for follow up questions. Don't ask for help and run away. Stick around to answer questions and provide more details.
Ask about the problem you're trying to solve. Don't focus too much on debugging your exact solution, as you may be going down the wrong path. Include as much information as you can about what you ultimately are trying to achieve. See more on this here: https://xyproblem.info/

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 1 year ago

MODERATORS

Ategon@programming.dev

JaumeI@programming.dev

bugsmith@programming.dev

Can anyone walk me through a React phone component? (programming.dev)

submitted 1 year ago* (last edited 1 year ago) by Decide@programming.dev to c/learn_programming@programming.dev

7 comments fedilink hide all child comments

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.

you are viewing a single comment's thread
view the rest of the comments

[–] otl@lemmy.sdf.org 2 points 1 year ago (6 children)

Hard to troubleshoot without a fuller example.

when I use my data handler function to raise the value to the parent, it doesn't work.

What doesn't work? What is happening? Is the function returning some unexpected value? Some exception being thrown? Does some other component get in an unexpected state?

Hopefully we can help out with some more context :)

[–] Decide@programming.dev 1 points 1 year ago (1 children)

If there's any links, resources, mental models, or anything that you or anyone else think would be helpful in getting this to work, I'm all ears. Also, since it's pretty obvious that this is an assignment, my limitation is that I cannot use useEffect, and the PhoneComponent has to use 4 inputs.

I've been stuck on this for about a week now, so any help, feedback, insight, or articles I should read would be incredibly appreciated.

[–] otl@lemmy.sdf.org 2 points 1 year ago* (last edited 1 year ago) (1 children)

Thanks! Some quick thoughts.

Recommend staying away from LLMs (Bing, ChatGPT et al.) for now.

Take a look at Sharing data between components from the official React quick start guide.

Try thinking about what is required without thinking about React. I think we need 4 input elements. The value of those elements needs to be concatenated and displayed to the user. Is that right?

From there, we can work out a way to implement what we need using React. Thinking this way helps us start with an even simpler implementation e.g. using just 1 input element instead of 4.

There's a few things we don't need right now: unused props like errorMessage, useRef(), and changing focus.

I've heard of raising state to the parent, but passing state down, not as data, but as actual state, sounds difficult and somewhat complex.

I think what you're talking about are Signals from Preact? This feature isn't required right now and it introduces complexity; I personally find it hard to juggle extra concepts in my head especially when starting out with some new tooling.

If you're still interested we could try writing a couple of basic components that get us part of the way there.

[–] Decide@programming.dev 1 points 1 year ago* (last edited 1 year ago) (1 children)

I'll stay away from the LLMs for now -- they're largely unhelpful anyway.

The value of those elements needs to be concatenated and displayed to the user. Is that right?

Right. The other components with a single text box seem to work fine, it's the multiple boxes in the phone component, and it's local state, that are confusing me to no end.

I think what you're talking about are Signals from Preact?

Oh, no, when I was talking to Bing it said that the local state interferes with the parent state, so I instead need to bring the parent state into the child. It sort of makes sense? At least the part that local and parent state can interfere with each other makes sense.

If you're still interested we could try writing a couple of basic components that get us part of the way there.

Please, I'm all ears. I have a feeling that your approach will help me a lot.

[–] otl@lemmy.sdf.org 2 points 1 year ago* (last edited 1 year ago) (1 children)

Ok! Just so I'm clear on what we need to do, what do you think the final HTML would look like? Happy to keep comms over Lemmy but email might be easier than fighting with Lemmy's markdown renderer. My deets are at http://www.olowe.co/about.html in "Contact"

[–] Decide@programming.dev 1 points 1 year ago* (last edited 1 year ago)

For sure, I'll send you an email.

edit: sent. Thank you again for the help.

load more comments (4 replies)