How to Get Multiple TextInput Values in single variable in React-Native?

Question

How to get values from multiple TextInput fields coming from array passing by map function to single variable by entering text in them? When i try to enter text in second TextInput it replaces the value which i stored from first TextInput.

Secondly instead of this, if i use push() function, it doesn't give desired output. What I exactly want is that to get the values of these three InputText and to store in single variable using single OnChangeEvent (as I am using Map() function).

Below is the sample of code on which i am working in React-Native.

this.state={
checkboxAttCollection:[{"Id": 10, "AttibuteCollectionName": "PowerTest"}, {"Id": 22, "AttibuteCollectionName": "36W"}, {"Id": 23, "AttibuteCollectionName": "Test123"}],
getInputText:'',
getInputvariables:[],

onChangeTextComp=(TextValue,index)=>{
    this.state.getInputText=TextValue
    console.log("******",this.state.getInputvariables)
    this.state.getInputvariables.push(this.state.getInputText)
    console.log("******",this.state.getInputvariables)

{this.state.checkboxAttCollection.map((item, i) => 

        return (<View key={item.AttibuteCollectionId} style={{ flexDirection: 'row',}}>

            <TextInput style={{height:hp('5%'),width:wp('60%'),backgroundColor:'red',borderBottomWidth:2,paddingVertical:0}}
           onChangeText={(text)=>this.onChangeTextComp(text,i)}
           MultiInputText={true}/>
            {/* </View> */}
        </View>)
    })}

Nooruddin Lakhani · Accepted Answer · 2020-11-28 06:32:45Z

1

Try this way

this.state={
    ......
    inputVlaues: []
}

onChangeTextComp=(value,index)=>{

  const inputData = [...this.state.inputVlaues]; 
  inputData[index] = value; 
  this.setState(inputVlaues: inputData);   
  
}

{this.state.checkboxAttCollection.map((item, i) => 

        return 
     (<View key={item.AttibuteCollectionId} style={{ flexDirection: 'row',}}>

            <TextInput 
            onChangeText={(text)=>this.onChangeTextComp(text,i)}
            ......
            value={this.state.inputVlaues[i] || ""}
        />
        </View>)
    })}

answered Nov 28, 2020 at 6:32

Nooruddin Lakhani

6,8513 gold badges22 silver badges43 bronze badges

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

Comments

Dmytro Portianka · Accepted Answer · 2022-07-18 19:18:38Z

0

as an option you can generate event handlers dynamically


const [form, setForm] = useState({})

const createHandler = (fieldName) => {
  return (newFieldValue) => {
    setForm((oldValue) => {
      return {
        ...oldValue,
        [fieldName]: newFieldValue
      }
    })
  }
}

return (
<>
  <TextInput onChange={createHandler('name')} />
  <TextInput onChange={createHandler('surname')} />
</>
)

answered Jul 18, 2022 at 19:18

Dmytro Portianka

214 bronze badges

Collectives™ on Stack Overflow

How to Get Multiple TextInput Values in single variable in React-Native?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related