Есть ли способ, которым я могу скрыть несколько компонентов textinput в реагировать на родной

Question

Итак, я делаю приложение, и на первом экране оно запрашивает число, а когда ему дается число, он показывает количество текстового ввода числа. Итак, скажем num == 1 компонент ввода текста будет на следующем экране. Я узнал, как скрыть и показать до 2 текстовых входов, но я застрял на трех. Пожалуйста, помогите мне.

Главный экран. 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>
);

}}

Расчетный экран. 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

Вы можете использовать функцию map() следующим образом:

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

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