How do I manage multiple user inputs with only one onChange in React Native? - react-native

Question

How do I handle multiple text inputs with only one onChange on React Native?
For example:
Name, age, nationality, eye color.
Additionally, how do I save all of the inputs with only one button? (I want to output a list with all of these inputs in the same "item")
Here's my code with what I did so far, I want to make a sort of movie diary where the user can register new movies they want to watch: (I'm a total beginner btw, so I'm not sure about how to do most things. I'm doing this project to learn)
import React, { useState } from 'react';
import { Button, StyleSheet, View, Text, TextInput, ScrollView } from 'react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
const Registration = props => {
const [enteredMovieName, setMovieName] = useState("");
const [enteredSynopsis, setSynopsis] = useState("");
const [enteredComments, setComments] = useState("");
const [enteredSource, setSource] = useState("");
const movieData = {
Name: enteredMovieName,
Synopsis: enteredSynopsis,
Comments: enteredComments,
Source: enteredSource,
};
const movieDataHandler = () => {
console.log(movieData);
};
return (
<ScrollView>
<View>
<View>
<Text style={styles.bodyHighlight}>Add new movie</Text>
</View>
<ScrollView>
<View>
<Text style={styles.addMovie} >Movie name:</Text>
<TextInput
placeholder='Cool Movie Name'
style={styles.inputContainer}
onChangeText={enteredText => setMovieName(enteredText)}
value={enteredMovieName}
/>
<Text style={styles.addMovie} >Sinopsis:</Text>
<TextInput
placeholder='Amazing Synopsis'
style={styles.inputContainer}
onChangeText={enteredText => setSynopsis(enteredText)}
value={enteredSynopsis}
/>
<Text style={styles.addMovie} >Comments (optional):</Text>
<TextInput
placeholder='Awesome Thoughts'
style={styles.inputContainer}
onChangeText={enteredText => setComments(enteredText)}
value={enteredComments}
/>
<Text style={styles.addMovie} >Where to watch (optional):</Text>
<TextInput
placeholder='Super Useful Link'
style={styles.inputContainer}
onChangeText={enteredText => setSource(enteredText)}
value={enteredSource}
/>
</View>
<View>
<Button
style={styles.addMovie}
title='ADD'
color='#a30b00'
onPress={movieDataHandler}
/>
<Button
style={styles.addMovie}
title='SEE COMPLETE LIST'
color='#cd5c5c'
onPress={() => {
props.navigation.navigate('Items Screen');
}}
/>
</View>
</ScrollView>
</View >
</ScrollView>
)
}
const styles = StyleSheet.create({
bodyHighlight: {
padding: 10,
margin: 5,
fontWeight: 'bold',
fontSize: 25,
textAlign: 'center',
backgroundColor: '#C4BDBA'
},
inputContainer: {
borderColor: 'black',
borderWidth: 2,
width: 380,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 10,
marginBottom: 5,
},
addMovie: {
padding: 10,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',
marginHorizontal: 10,
},
})
export default Registration;

Answer 1

You can manage all states in an object. For example:
import React from 'react';
import {
SafeAreaView,
StyleSheet,
TextInput,
Button,
Alert,
} from 'react-native';
const UselessTextInput = () => {
const [user, setUserData] = React.useState({ name: '', age: 0 });
return (
<SafeAreaView>
<TextInput
style={styles.input}
onChangeText={(text) => setUserData({...user, name: text })}
value={user.name}
/>
<TextInput
style={styles.input}
onChangeText={(age) => setUserData({...user, age: age })}
value={user.age}
/>
<Button onPress={() => Alert.alert(`User name ${user.name}, age ${user.age}`)} title="click me" />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
marginTop: 42,
borderWidth: 1,
padding: 10,
},
});
export default UselessTextInput;

Answer 2

create a new function and make changes to the a copied object and push the new object to the state
const handleChange=(key,value)=>{
const myState = user
myState[key] = value
setUserData(myState)
}
then pass the function call to onChangeText prop
<TextInput
style={styles.input}
onChangeText={(text) => handleChange('name', text)}
value={user.name}
/>