Update Firebase Document in Functional Component with Text Inputs

Question

This is my screen that the user can visit to edit/update their details. My problem is I can't seem to get the values from the Inputs to be used as the new data when the save button is pressed. It complains about being a function. How to convert my state to a string for the function to update the firebase document?

const UserProfileEditScreen = ({ navigation }) => {

    const user = auth.currentUser;
    const [userData, setUserData] = useState({});

    const getUser = async() => {
        const currentUser = await firestore
        .ref('users')
        .doc(user.uid)
        .get()
        .then((documentSnapshot) => {
          if( documentSnapshot.exists ) {
            setUserData(documentSnapshot.data());
          }
        })
    }

    const [displayName, setNewDisplayName] = useState('');
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [birthdate, setBirthdate] = useState('');
    
    const handleUpdate = () => {
        firestore.collection('users').doc(user.uid).set({
            displayName: setNewDisplayName,
            name: setName,
            surname: setSurname,
        }).then(() => {
            console.log('User Updated!');
            Alert.alert(
              'Profile Updated!',
              'Your profile has been updated successfully.'
            );
        });
        navigation.navigate('Profile');
    }

    useEffect(() => {
        getUser();
    }, [])        

    return (
        <DismissKeyboard>
        <View style={styles.container}>
            <View style={styles.insideContainer}>
                <Text style={[styles.headTextH2, styles.whiteText]}>Edit Account</Text>
                <View style={{marginBottom:45}}></View>
                <Text style={[styles.headTextH3, styles.whiteText]}>Display Name</Text>
                <TextInput
                    style={styles.inputStyles}
                    placeholder={userData.displayName}
                    placeholderTextColor="#000"
                    value={displayName}
                    onChangeText={setNewDisplayName}
                />
                <Text style={[styles.headTextH3, styles.whiteText]}>Name</Text>
                <TextInput
                    style={styles.inputStyles}
                    placeholder={userData.name}
                    placeholderTextColor="#000"
                    value={name}
                    onChangeText={setName}
                /> 
                <Text style={[styles.headTextH3, styles.whiteText]}>Surname</Text>
                <TextInput
                    style={styles.inputStyles}
                    placeholder={userData.surname}
                    placeholderTextColor="#000"
                    value={surname}
                    onChangeText={setSurname}
                />                                             
                <OGButton title="Save Changes" onPress={()=> handleUpdate()} />
            </View>            
        </View>
        </DismissKeyboard>
    )
}

Error Message:

Answer 1

setName, setSurname are functions that are used to set the value of name and surname respectively and you are passing them in Firestore's set method.

const [displayName, setNewDisplayName] = useState('');
const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [birthdate, setBirthdate] = useState('');

Instead you should pass the values like this:

firestore.collection('users').doc(user.uid).set({
  displayName, name, surname
})