Is there a way that I can hide multiple textinput components in react native

Question

So I’m making an app and the first screen it asks for a number and when the number is given it shows textinput’s the amount of the number. So let’s say num==1 the textinput component will be one on the next screen. I found out how to hide and show up to 2 textinput’s but I’m stuck at three. Please help me.

Homescreen.js

render() {
return (
  <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={styles.container}>
      <Text style={styles.header}>GFM Calculator</Text>
      <TextInput
        style={styles.input}
        keyboardType="number-pad"
        placeholder="Enter the number of elements..."
        placeholderTextColor="#A8A8A8"
        onChangeText={(elements) => this.setState({ elements })}
        value={this.state.elements}
      />
      <View style={{ alignItems: "flex-end", marginTop: 64 }}>
        <TouchableOpacity
          style={styles.continue}
          onPress={() => {
            this.props.navigation.navigate('Calculate', {
              data: this.state.elements,
            });
          }}
        >
          <Ionicons name="md-arrow-round-forward" size={24} color="#fff" />
        </TouchableOpacity>
      </View>
      <Text style={styles.header2}>Made By Godson Umoren</Text>
    </View>
  </TouchableWithoutFeedback>
);

} }

Calculatescreen.js

    showtextinput = function (options) {

      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      }
    }


  showtextinput2 = function (options) {
    if (this.state.data == "2") {
      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      };
    } else {
      return {

       display: "none",
      };
    }
  };

  showtextinput3 = function (options) {
    if (this.state.data == "3") {
      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      };
    } else {
      return {
        display: "none",
      };
    }
  };

  showtextinput4 = function (options) {
    if (this.state.data == "4") {
      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      };
    } else {
      return {
        display: "none",
      };
    }
  };

  showtextinput5 = function (options) {
    if (this.state.data == "5") {
      return {
        color: "#fff",
        fontWeight: "600",
        justifyContent: "flex-end",
        marginLeft: 40,
        height: 50,
        width: "40%",
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: "#fff",
        borderRadius: 30,
        paddingHorizontal: 20,
        alignItems: "center",
        alignSelf: "center",
        alignContent: "center",
        //display: 'none',
      };
    } else {
      return {
        display: "none",
      };
    }
  };

//......
 <TextInput
            style={this.showtextinput()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles1) => this.setState({ moles1 })}
            value={this.state.moles1}
          />

  <TextInput
            style={this.showtextinput2()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles2) => this.setState({ moles2 })}
            value={this.state.moles2}
          />

<TextInput
            style={this.showtextinput3()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles3) => this.setState({ moles3 })}
            value={this.state.moles3}
          />

 <TextInput
            style={this.showtextinput4()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles4) => this.setState({ moles4 })}
            value={this.state.moles4}
          />

 <TextInput
            style={this.showtextinput5()}
            placeholder="Number of Moles"
            placeholderTextColor="#fff"
            onChangeText={(moles5) => this.setState({ moles5 })}
            value={this.state.moles5}
          />

Answer 1

You can use map() function like this:

let elements = new Array(this.state.elements)

render(){
  <View>
    {
      elements.map(e => <Text>'test'</Text>)
    }
  </View>
}