January 15, 2021

React Class to Function Pt. 1

Title Image

Hola. 👋🏾

Below is a condensed example of a class component that I converted into a functional component in a React Native app a few weeks ago. Whether it's a React app or React Native app though, the principles would have been the same.

For some the below may be enough to go off and convert classes yourself. For anyone who would appreciate a more guided approach, I'll be breaking down a few pieces over the next few posts.

  • Declaring the function and props
  • Removing the constructor
  • Converting common lifecycle methods
  • Converting helper functions

Class

1import React, { Component } from 'react'
2import { Alert, Button, TextInput, View } from 'react-native'
3
4class Form extends Component {
5 constructor(props) {
6 super(props)
7 this.state = {
8 email: '',
9 name: '',
10 }
11 this.emailRef = React.createRef()
12 this.nameRef = React.createRef()
13 }
14
15 componentDidMount() {
16 this.keyboardDidHide = Keyboard.addListener(
17 'keyboardDidHide',
18 this._keyboardDidHide
19 )
20 }
21
22 componentWillUnmount() {
23 this.keyboardDidHide.remove()
24 }
25
26 _keyboardDidHide = () => this.props.scrollDown()
27
28 onChange = field => value => this.setState({ [field]: value })
29
30 onSubmitRequest = async () => {
31 const { email, name } = this.state
32
33 if (!name || !email || name.length === 0 || email.length === 0) {
34 return Alert.alert('Please fill in all the fields')
35 }
36
37 Alert.alert(
38 `Got it!`,
39 [{ text: 'OK', onPress: () => resetTextFields() }],
40 { cancelable: false }
41 )
42 }
43
44 resetTextFields = () => {
45 this.setState({
46 name: '',
47 email: '',
48 })
49 }
50
51 render() {
52 const { submitText } = this.props
53
54 return (
55 <View>
56 <TextInput
57 value={name}
58 ref={this.nameRef}
59 onChangeText={this.onChange('name')}
60 />
61 <TextInput
62 value={email}
63 ref={this.emailRef}
64 onChangeText={this.onChange('email')}
65 />
66 <Button
67 text={submitText}
68 onPress={() => onSubmitRequest()}
69 />
70 </View>
71 )
72 }
73}
74
75export default Form

Function

1import React, { useEffect, useRef, useState } from 'react'
2import { Alert, Button, TextInput, View } from 'react-native'
3
4const Form = ({ scrollDown, submitText }) => {
5 const [email, setEmail] = useState('')
6 const [name, setName] = useState('')
7 const emailRef = useRef()
8 const nameRef = useRef()
9
10 useEffect(() => {
11 const keyboardDidHide = Keyboard.addListener(
12 'keyboardDidHide',
13 _keyboardDidHide
14 )
15
16 return () => {
17 keyboardDidHide.remove()
18 }
19 }, [])
20
21 const _keyboardDidHide = () => scrollDown()
22
23 const onSubmitRequest = async () => {
24 if (!name || !email || name.length === 0 || email.length === 0) {
25 return Alert.alert('Please fill in all the fields')
26 }
27
28 Alert.alert(
29 `Got it!`,
30 [{ text: 'OK', onPress: () => resetTextFields() }],
31 { cancelable: false }
32 )
33 }
34
35 const resetTextFields = () => {
36 setName('')
37 setEmail('')
38 }
39
40 return (
41 <View>
42 <TextInput
43 value={email}
44 ref={emailRef}
45 onChangeText={email => setEmail(email)}
46 />
47 <TextInput
48 value={name}
49 ref={nameRef}
50 onChangeText={name => setName(name)}
51 />
52 <Button
53 text={submitText}
54 onPress={() => onSubmitRequest()}
55 />
56 </View>
57 )
58}
59
60export default Form

See you next time. 🙃