How to Add or Remove TextInput Dynamically and get Values in React Native

In this blog post, I am going to write about how to dynamically add or remove the TextInput component and get corresponding values from each text input in react native.

In this react native dynamic TextInput example, I have three buttons namely add, remove and get values. Pressing add button will add a TextInput component whereas using the remove button results in the removal of TextInput one by one. Pressing the get values button will retrieve the text entered in each TextInput as a JSON array.

Here’s the complete code of the react native example in typescript.

import React, {useState} from 'react';
import {View, TextInput, Button, StyleSheet} from 'react-native';

const App = () => {
  const [textInputs, setTextInputs] = useState<JSX.Element[]>([]);
  const [inputData, setInputData] = useState<{text: string; index: number}[]>(
    [],
  );

  //function to add TextInput dynamically
  const addTextInput = (index: number) => {
    setTextInputs(
      textInputs.concat(
        <TextInput
          style={styles.textInput}
          onChangeText={(text: string) => addValues(text, index)}
        />,
      ),
    );
  };

  //function to remove TextInput dynamically
  const removeTextInput = () => {
    setTextInputs(textInputs.slice(0, -1));
    setInputData(inputData.slice(0, -1));
  };

  //function to add text from TextInputs into single array
  const addValues = (text: string, index: number) => {
    const dataArray = inputData;
    let checkBool = false;
    if (dataArray.length !== 0) {
      dataArray.forEach(element => {
        if (element.index === index) {
          element.text = text;
          checkBool = true;
        }
      });
    }
    if (checkBool) {
      setInputData(dataArray);
    } else {
      dataArray.push({text: text, index: index});
      setInputData(dataArray);
    }
  };

  //function to console the output
  const getValues = () => {
    console.log('Data', inputData);
  };

  return (
    <View>
      <View style={styles.row}>
        <View style={{margin: 10}}>
          <Button title="Add" onPress={() => addTextInput(textInputs.length)} />
        </View>
        <View style={{margin: 10}}>
          <Button title="Remove" onPress={() => removeTextInput()} />
        </View>
      </View>
      {textInputs.map(value => value)}
      <Button title="Get Values" onPress={() => getValues()} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  buttonView: {
    flexDirection: 'row',
  },
  textInput: {
    height: 40,
    borderColor: 'black',
    borderWidth: 1,
    margin: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
});

export default App;

I have used arrays to generate the TextInput component as well as to retrieve data from each TextInput. Following is the output of the react native example.

dynamic textinput data react native

That’s how you dynamically add or remove TextInput dynamically and get corresponding values in react native.

4 thoughts on “How to Add or Remove TextInput Dynamically and get Values in React Native”

  1. please let me know how to add 2 dynamic textinputs like you add 1 input. I need to know how to get 2dynamic textinputs and display in an array.

    please let me know and share your code

    Reply

Leave a Reply

%d bloggers like this: