React Native: Add/Remove input field on click of a button

Question

React Native: Add/Remove input field on click of a button:

When a user click Add, I want a new input field to be added.

How could you do it? The information is saved in a Firebase database

I have found information in react js but not in react native

Function to validate fields and send to Firebase:

constructor(props) {
    super(props);

    this.state = {
      Cbusto: "",
      Ccintura: "",
      Ccadera: "",
    };
  }

  validate() {
    if (
      this.state.Cbusto == "" &&
      this.state.Ccintura == "" &&
      this.state.Ccadera == ""
    ) {
      alert("empty fields");
    } else if (this.state.Cbusto == "") {
      alert("empty fields");
    } else if (this.state.Ccintura == "") {
      alert("empty fields");
    } else if (this.state.Ccadera == "") {
      alert("empty fields");
    } else {
      firebase.database().ref("medidas/").push({
        Cbusto: this.state.Cbusto,
        Ccintura: this.state.Ccintura,
        Ccadera: this.state.Ccadera,
      });
      alert("Medidas guardadas");
      this.props.navigation.navigate("DatosCli", {
        Cbusto: this.state.Cbusto,
        Ccintura: this.state.Ccintura,
        Ccadera: this.state.Ccadera,
        id: this.props.route.params.id,
      });
    }
  }

Render:

      render() {
    return (
      <ScrollView>
        <View style={styles.container}>
        
          <Text style={styles.texto}> Contorno busto/cm</Text>

          <View style={styles.input}>
            <TextInput
              keyboardType={"numeric"}
              onChangeText={(text) => this.setState({ Cbusto: text })}
            ></TextInput>
          </View>

          <Text style={styles.texto}> Contorno cintura/cm</Text>

          <View style={styles.input}>
            <TextInput
              keyboardType={"numeric"}
              onChangeText={(text) => this.setState({ Ccintura: text })}
            ></TextInput>
          </View>

          <Text style={styles.texto}> Contorno cadera/cm</Text>

          <View style={styles.input}>
            <TextInput
              keyboardType={"numeric"}
              onChangeText={(text) => this.setState({ Ccadera: text })}
            ></TextInput>
          </View>

          <View style={styles.flex}>
            <View style={styles.ButtonAdd}>
              <Button title="Add input" color="#B13682"></Button>
            </View>

            <View style={styles.ButtonDelete}>
              <Button title="delete input" color="#B13682"></Button>
            </View>
          </View>

          <View style={styles.otro}>
            <Button
              title="Send"
              color="#B13682"
              onPress={() => {
                this.validate();
              }}
            ></Button>
          </View>
        </View>
      </ScrollView>
    );
  }

Answer 1

is solved by creating a component in a new file that is then imported into the main view

Code for the component:

 render(){
    return(
        <View>
            <Text>prueba:{this.props.item.text}</Text>
            <View style={styles.input}>
            <TextInput></TextInput>
            </View>
        </View>
    )
}

then, in the overview

import the component:

import Campo from "./campoInput";

we create a state:

valueArray:[]

then the function that is called by pressing the add field button

agregarCampo = () => {
this.addNewEle = true;
const newlyAddedValue = { text: "prueba" };

this.setState({
  valueArray: [...this.state.valueArray, newlyAddedValue],
 });
};

and finally in the render we go through the valueArray and return the component

<View style={{ flex: 1, padding: 4 }}>
     {this.state.valueArray.map((ele) => {
       return <Campo item={ele}
        onChangeText={(text) => this.setState({ info: text })}
         />;
      })}
</View> 

<View style={styles.ButtonAdd}>
        <Button
           title="Add input"
         color="#B13682"
        onPress={this.agregarCampo}
       ></Button>
 </View>