How to hide up to five textinput's

[kayumoren]

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}
          />