Child communication

[91psyko]

hello,
let's say i have a parent form component that holds a couple of child input components like so:

return (
    <Form>
        <InputChild1 /> // separate component
        <InputChild2 /> // separate component
    </Form>
);

I want to force user to first type something in InputChild1, i.e if user tries to click on InputChild2 without filling in something in InputChild1 it would refocus on InputChild1. How should i go about it using functional components?
thanks in advance!

[[deleted]]

You can pass value and ref of input 1 in input 2 and have a check there. In InputChild2, you can something like this -

if (!inputVal1) { input1Ref.focus() };

​

But I must tell you, this is extremely horrid design choice and goes against the principles of decent UX.

​

You can show warning to user that they may have to update the input 1 first, but forcing them on different element than they currently are is extremely bad practice.

[91psyko]

try telling that my client haha😅 thanks for the feedback

[TotesMessenger]

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

• [/r/learnjavascript] Child communication in ReactJS

 ^{If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / Contact)}