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.