Address data field automatically removes in text field in react native

Question

Facing the issue where I enter data in the "Address" field where I want to get user's home address and it automatically gets removed while the other fields work just fine i.e. the data entered stays in the field.

Apologies for bad variable naming as I'm still a beginner. Here's the code:

import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  StyleSheet,
  Pressable,
  Image,
  Alert,
} from "react-native";
import { useRoute, useNavigation } from "@react-navigation/native";

export default function AddressScreen() {
  const route = useRoute();
  const navigation = useNavigation();
  const { address: initialAddress, handleAddressChange } = route.params;
  const [address, setAddress] = useState(initialAddress);

  const handleDone = () => {
    if (Object.values(address).some((val) => val.trim() === "")) {
      Alert.alert("Error, Please fill in all fields.");
      return;
    }
    handleAddressChange(address);
    navigation.goBack();
  };

  const handleChange = (field, value) => {
    console.log(`Changing ${field} to ${value}`);
    setAddress((prev) => ({ ...prev, [field]: value }));
  };

  console.log("Rerendering AddressScreen");
  return (
    <View style={StyleSheet.container}>
      <TextInput
        style={styles.input}
        placeholder="Full Name"
        value={address.fullName}
        onChangeText={(text) => handleChange("fullName", text)}
      />
      <TextInput
        style={styles.input}
        placeholder="Address"
        value={address.addressLine}
        onChargeText={(text) => handleChange("addressLine", text)}
      />
      <TextInput
        style={styles.input}
        placeholder="City"
        value={address.city}
        onChangeText={(text) => handleChange("city", text)}
      />
      <TextInput
        style={styles.input}
        placeholder="Email Address"
        value={address.emailAddress}
        onChangeText={(text) => handleChange("emailAddress", text)}
      />
      <TextInput
        style={styles.input}
        placeholder="Phone Number"
        value={address.phoneNumber}
        onChangeText={(text) => handleChange("phoneNumber", text)}
      />
      <Pressable style={styles.doneButton} onPress={handleDone}>
        <Text style={styles.doneButtonText}>DONE</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({...})

handleAddressChange takes the data from all text fields and pass on to the another component so this shouldn't be the problem. I did the logs and what I figured is that handleChange isn't invoked whenever i enter data into the address field while it does for other fields and the data entered into address field only, automatically removes after a second while the other fields don't exhibit the same behavior. Since the code is written the same for all fields (according to me) why is that happening and how to fix?

Answer 1

There is a typo mistake in your code.

Below is Your code (Typo mistake is onChargeText):

<TextInput
  style={styles.input}
  placeholder="Address"
  value={address.addressLine}
  onChargeText={(text) => handleChange("addressLine", text)}
/>

Change it with onChangeText:

<TextInput
  style={styles.input}
  placeholder="Address"
  value={address.addressLine}
  onChangeText={(text) => handleChange("addressLine", text)}
/>