Title Image

February 26, 2021

Hola. 👋🏾

What I'm calling "helper functions" are simply the functions written outside of the "render" method, that are called inside the "return" statement. In the class component our Button is calling the "onSubmitRequest" method which sets up the "resetTextFields" function.

1import React, { Component } from 'react'
2import { Alert, Button } from 'react-native'
3
4class Form extends Component {
5 constructor(props) {
6 super(props)
7 this.state = {
8 email: '',
9 name: '',
10 }
11 }
12
13 onSubmitRequest = async () => {
14 Alert.alert(
15 `Got it!`,
16 [{ text: 'OK', onPress: () => resetTextFields() }],
17 { cancelable: false }
18 )
19 }
20
21 resetTextFields = () => {
22 this.setState({
23 name: '',
24 email: '',
25 })
26 }
27
28 render() {
29 return <Button onPress={() => onSubmitRequest()} />
30 }
31}
32
33export default Form

In the functional component the only real difference, besides changes we've already discussed, is that the helper functions are declared as a const.

1import React, { useState } from 'react'
2import { Alert, Button } from 'react-native'
3
4const Form = () => {
5 const [name, setName] = useState('')
6 const [email, setEmail] = useState('')
7
8 const onSubmitRequest = async () => {
9 Alert.alert(
10 `Got it!`,
11 [{ text: 'OK', onPress: () => resetTextFields() }],
12 { cancelable: false }
13 )
14 }
15
16 const resetTextFields = () => {
17 setName('')
18 setEmail('')
19 }
20
21 return <Button onPress={() => onSubmitRequest()} />
22}
23
24export default Form

See you next time. 🙃