tal vez esta pregunta se haya hecho antes, pero desafortunadamente no pude encontrar la respuesta.

Tengo una pantalla llamada AccountManagement, donde puedo cambiar los datos de los usuarios y al final hay un botón que actualiza los datos.

 const AccountManagement = (props) => { const {userData} = useContext(AuthContext) const [name, setName] = useState(userData.name) //other data... const update = () => { userData.name = name // set other data updateProfile(userData) navigation.navigate('Profile') } }

Hasta ahora, muy bien, todo funciona bien. Pero si llamo a la misma función (update()) en otro componente a través de props, el cambio de estado del nombre, por ejemplo, se ignora. A continuación, se encuentra la llamada de regreso de la misma pantalla AccountManagement

 return( <SafeAreaView style={styles.container}> <HeaderBar updateInfo={update}/> <TextInput style={styles.input} value={name} onChangeText={setName} placeholder=""/> <TouchableOpacity style={styles.changeContainer} onPress={update}> <Text style={styles.change}>Update Info</Text> </TouchableOpacity> )

En el componente HeaderBar, tengo TouchableOpacity, que debería hacer exactamente lo mismo que TouchableOpacity en AccountManagement, llame a update(), lo cual hace, pero el nombre cambiado nunca se usa cuando presiono TouchableOpacity en el componente HeaderBar.

 const HeaderBar = (props) => { return( <View> <TouchableOpacity onPress={props.updateInfo} style={styles.rightContainer}> <Text style={styles.rightText}>Update Info</Text> </TouchableOpacity> </View> } )

Incluso si intento imprimir con console.log, no puedo ver el cambio.

Mi pregunta ahora es:

¿Por qué se ignora el nombre cambiado cuando presiono actualizar desde el componente HeaderBar?

¿Cómo puedo solucionar este problema?

Gracias de antemano