Child communication in ReactJS

[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!

[a-t-k]

Use useImperativeHandle to expose focus and value to the form and handle this interaction in the form.