How do I manage multiple user inputs with only one onChange in 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

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}
    />