New post

If you want to use a TextInput component to handle multiple values, you can achieve this by maintaining an object in your component state to store these values. Here’s an example where each key in the object represents a different input field:

jsxCopy code

import React, { useState } from 'react'; import { View, TextInput, Button, StyleSheet } from 'react-native'; const MultiValueTextInput = () => { const [inputValues, setInputValues] = useState({ firstName: '', lastName: '', email: '', }); const handleInputChange = (key, value) => { setInputValues((prevValues) => ({ ...prevValues, [key]: value, })); }; const handleSubmit = () => { // Do something with inputValues, such as sending it to a server or performing other logic console.log('Submitted values:', inputValues); }; return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="First Name" value={inputValues.firstName} onChangeText={(text) => handleInputChange('firstName', text)} /> <TextInput style={styles.input} placeholder="Last Name" value={inputValues.lastName} onChangeText={(text) => handleInputChange('lastName', text)} /> <TextInput style={styles.input} placeholder="Email" value={} onChangeText={(text) => handleInputChange('email', text)} keyboardType="email-address" /> <Button title="Submit" onPress={handleSubmit} /> </View> ); }; const styles = StyleSheet.create({ container: { padding: 16, }, input: { height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 12, paddingLeft: 8, }, }); export default MultiValueTextInput;

In this example:

  • The state inputValues is an object with keys representing different input fields (e.g., firstName, lastName, email).
  • The handleInputChange function is used to update the corresponding key in the state when the text changes in the TextInput.
  • Each TextInput is associated with a specific key in the state, making it easy to manage and retrieve the values.

You can customize this example based on your specific use case and add more input fields as needed.