pass multiple params onChangeText input element function - React native

Question

I have multiple Input elements and everytime the user type into these Inputs I call handleChange() function which should tell what the user has written and which Input he has typed in.

This is what I have done:

handleChange(text, name) {
    console.log("test: "text+" "+name);
}

//http://facebook.github.io/react-native/releases/0.23/docs/textinput.html
for (var p = 0; p < 20; p++){
      products.push (<TextInput name={p} onChangeText={(text, name) => this.handleChange(text, name)}></TextInput> );
}

the console.log inside handleChange function correctly shows the text written by user but doesn't display correctly name variable which results undefined.

facebook.github.io/react-native/docs/handling-text-input.html - it doesn't appear to have the 2nd param. — G0dsquad
– G0dsquad, Commented Jan 4, 2017 at 15:46
onChangeText by default takes the parameter value as the text entered and hence only one param. What you can try is onChangeText{(text, p) => this.handleChange(text, p)}} and see if it works — Shubham Khatri
– Shubham Khatri, Commented Jan 4, 2017 at 15:52

Matt Aft · Accepted Answer · 2017-01-04 18:00:36Z

9

What is name supposed to be? All you're doing is setting name to an integer, but here's a way to make it work:

handleChange(text, name) {
  console.log("test: "text+" "+name);
}

//http://facebook.github.io/react-native/releases/0.23/docs/textinput.html
for (let p = 0; p < 20; p++){
  products.push (<TextInput onChangeText={(text) => this.handleChange(text, p)}></TextInput> );
}

edited Jan 4, 2017 at 18:00

answered Jan 4, 2017 at 16:17

Matt Aft

8,9663 gold badges28 silver badges38 bronze badges

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

3 Comments

splunk Over a year ago

If I do like you said everytime handleChange is called p is always equal to 19, the last loop index value. Instead I want this: If I change the first input "p" (the one passed in the params along with text) should be 1, if I change the second input "p" should be 2 and so on. In my code It seems that name={p} doesn't assign "p" to name. I tried with value={p} and inputs were still empty, while if I do value="a" all 20 inputs hold "a" content. How can I assign variable "p" to name and value of inputs?

Matt Aft Over a year ago

Still don't understand what you mean, the text variable is whatever the user inputs into the textfield. Also if you change var p = 0 to let p = 0 that should solve your other issue.

Rishichandra Wawhal Over a year ago

Sorry my bad. I was doing something wrong. Deleted the comment.

Nasreen Ustad · Accepted Answer · 2020-09-03 09:47:22Z

0

handleChange= (name) => {
return (text) => {
   console.log("test: "name+" "+text); 
}};

[https://hackernoon.com/curry-away-in-react-7c4ed110c65a][1]

for (let p = 0; p < 20; p++){
products.push (<TextInput onChangeText={this.handleChange(p)}> 
</TextInput> );
}

answered Sep 3, 2020 at 9:47

Nasreen Ustad

1,7421 gold badge20 silver badges25 bronze badges

Collectives™ on Stack Overflow

pass multiple params onChangeText input element function - React native

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related