Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How does one trigger an action in a child functional component in React?

$
0
0

With a basic form/input layout, it's clear that a callback should be used for state changes from child to parent (initiated by child), but how can the parent ask the child component to re-assess its state and communicate that back to parent?

The end goal here is simply to trigger validation of child inputs upon submit of a form button.

Given [ts] code that looks like this:

    const Login : React.FC<Props> = (props) => {        ...useStates omitted        const onSubmit = () : void => {          //trigger `verify()` in PasswordInput to get up-to-date `valid` state var        }        return (<PasswordInput              onValidChange={setValid} /><Button              onPress={submit} />        )    }    const PasswordInput : React.FC<Props> = (props) => {        ...useStates omitted        const verify = () => {          //verify the password value from state          props.onValidChange(true)        }        return (<Input onBlur={verify}/>)     }

Notes/paths taken thus far:

UPDATELessons learned:

  • If you are going to trigger an action in a child component, you may use the refs method outlined by Nadia below, but the more proper React Way® is probably via a shared Reducer.
  • Don't expect state to always be updated through callbacks to your parent at time of calling into said reference. In my case, the only method ordering that worked was to have what would be the verify method above actually return the up-to-date values.

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>