"multiple usestate in single and onChangetext usng single function"
Bootstrap 4.1.1 Snippet by RachnaKhatnawlia

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> import React, { Component, useEffect, useState } from 'react'; import { View, Text, StyleSheet, TextInput } from 'react-native'; import SplashScreen from 'react-native-splash-screen' // create a component const App = () => { useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 1000); }, []) const [upDateData, setUpdateData] = useState({ name: '', email: '', pass: '', }) const { name, email, pass,em } = upDateData; const updateState = data => setUpdateData(state => ({...state, ...data})); const onChangeTextResult = (key, value) =>{ console.log(key, value, "key"); updateState({ [key]:value }) } return ( <View style={styles.container}> {/* <Text>App</Text> */} <TextInput placeholder='name' style={{ borderColor: 'grey', borderWidth: 2, padding: 15 }} value={name} onChangeText={(value)=>onChangeTextResult('name', value)} /> <TextInput placeholder='email' style={{ borderColor: 'grey', borderWidth: 2, padding: 15 }} value={email} onChangeText={(value)=>onChangeTextResult('email', value)} /> <TextInput placeholder='password' style={{ borderColor: 'grey', borderWidth: 2, padding: 15 }} value={pass} onChangeText={(value)=>onChangeTextResult('pass', value)} /> <Text>{name} {email} {pass}</Text> </View> ); }; // define your styles const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', // backgroundColor: '#2c3e50', }, }); //make this component available to the app export default App;

Related: See More


Questions / Comments: