OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Address data field automatically removes in text field in react native

  • Thread starter Thread starter Salman Arif
  • Start date Start date
S

Salman Arif

Guest
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:

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?

<p>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.</p>
<p>Apologies for bad variable naming as I'm still a beginner. Here's the code:</p>
<pre><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({...})
</code></pre>
<p><code>handleAddressChange</code> 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 <code>handleChange</code> 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?</p>
 

Latest posts

A
Replies
0
Views
1
Anthonin Chaboteaux
A
Top