How to dynamically add or remove a Text Input in React Native-CodePudding

How can I add a text input in React Native with the click of a button? For example, I would press the " " button and it would add a text input at the bottom of the View.

here is the code i found in another page but when i click on the plus nothing happen

var textInput = []

let addTextInput = (key) => {
    textInput.push(<TextInput key={key} style={{color:'red',borderColor:'red'}}/>);
    { textInput }
}

let orgServiceandWorkHours = (
    <View>
        <Button title=' ' onPress={() => 
       addTextInput(textInput.length)} />
    {textInput.map((value, index) => {
      return value
    })}
    </View>
)

CodePudding user response：

Heres a full example (https://snack.expo.dev/@heytony01/mature-carrot) and the code below.

export default function App() {

  const [numTextInputs,setNumTextInputs] = React.useState(0);
  return (
    <View style={styles.parent}>
        {/* Button */}
        <TouchableOpacity onPress={()=>setNumTextInputs(val=>val 1)} style={styles.buttton}>
              <Text style={styles.text}> Add TextInput </Text>
        </TouchableOpacity>
        <ScrollView style={{flex:1}} >
              {[...Array(numTextInputs).keys()].map(key=>{
                return <TextInput key={key} placeholder="Here Man" style={{width:200,height:100,borderColor:"blue",margin:10,borderWidth:1}}/>
              })}
        </ScrollView>
    </View>
  );


}

const styles = StyleSheet.create({
  parent:{flex:1,justifyContent:"center",alignItems:"center"},
  textInput:{width:"80%",height:"5%",backgroundColor:"lightgray",margin:20,borderRadius:10,textAlign:"center"},
  buttton:{width:"80%",height:"12%",backgroundColor:"lightblue",borderRadius:10,
        justifyContent:"center",alignItems:"center"
        },
  text:{fontSize:30,fontFamily:"bold",color:"black"},
})