How to multiple TextInput handle with single handler?

Question

I have create common class for TextInput and use it multiple time but its event handle with same method. i want to handle array data after filled the data in textInput.

Here Added multiple textField and single handleAddMore. How to identify which textInput called the handleAddMore.

The textField component added dynamically according to array data. now when user edit the textInput I want to identify the textInput and updated array text on particular index.

let addMoreCompView = this.state.dataAddMore.map((data ,index) =>{
 return(
   
     
         
     
      this.removeMoreComponent(data.key)} style = {{height : '90%' , width : '20%' , alignItems: 'flex-end', justifyContent: 'center'}}>
       
     
   
 )
});

Here I want to identify which TextInput called this method.

Here I want to text and index of textField.

 handleAddMore = (text) =>{

    // Here I want to text and index of textField.
 }

user_11000584 · Answer

_handleMultiInput(name) {
    return (text) => {
        this.setState({ [name]:text })
    }
}

user_5362410 · Answer

Using functional component. I have three inputs amount, date and description to save. Here is how to save them in single object and using same function for all three TextInput.

 // useState hook to store object
     const [inputValues, setInputValues] = useState({
        amount: '',
        date: '',
        description: '',
      });

      // will save user input
      function inputChangeHandler(inputIdentifier, enteredValue) {
        setInputValues(currentInputValues => {
           return {
              ...currentInputValues, 
              [inputIdentifier]: enteredValue, // dynamically override the desired input
           };
        });
       }

    // TextInput Component

How to multiple TextInput handle with single handler?

5 Answers