CODEWITHSUNDEEP
react-native
Navdeep Garg
Navdeep Garg

Reputation: 1

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

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

Upvotes: 0

Views: 1373

Answers (2)

Dmytro Portianka
Dmytro Portianka

Reputation: 21

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')} />
</>
)

Upvotes: 0

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

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

Upvotes: 1

Related Questions