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

Question

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>
)

Post some code and show others what you have tried so far

spirift
– spirift

2021-12-12 17:32:53 +00:00
Commented Dec 12, 2021 at 17:32 — spirift
– spirift, Commented Dec 12, 2021 at 17:32
Did you review this post?

Sercan
– Sercan

2021-12-12 17:33:38 +00:00
Commented Dec 12, 2021 at 17:33 — Sercan
– Sercan, Commented Dec 12, 2021 at 17:33

carlosdafield · Accepted Answer · 2021-12-12 19:37:55Z

3

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"},
})

edited Dec 12, 2021 at 19:37

answered Dec 12, 2021 at 19:08

carlosdafield

1,5378 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ashraf Hijazy Over a year ago

thats not what i mean , i asked if i can build a button that every time i press on it it will add a new TextInput on the page

carlosdafield Over a year ago

Okay there it is click the expo link

Ashraf Hijazy Over a year ago

great , thank you!

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related