Save state of TextInput array - React Native

Question

I am fetching from API multiple TextInputs and displaying them on my screen. So, how can I save the state of user inputs to a global object. Something like this:

    state = {
    foundtextfields: []
   }

Here I am pushing those fetched TextInputs to foundTextFields[] array:

var foundTextFields = [];

    foundTextFields.push(<TextInput>{keyvalue_to_json.inputFields[i].placeholderText}</TextInput>)

And I am displaying text inputs in this list:

return (
    <View>
      {foundtextfields}
    </View>
)

EDIT: I want to loop through the state of the array, and extract the key from that ex. “key” (signedbyFullName) and match if that is the same with the json body property "signedbyFullName" like below.

  postToBmp = (obje) => {
var userArray = [];
for (i = 0; i < this.myInputFields.myTextFields.length; i++) {
       userArray.push(this.myInputFields.myTextFields[i])
       console.log("this is the title of al inputFields:",   this.myInputFields.myTextFields[i].key)
}

fetch('URL', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Connection': 'Keep-Alive',
  },
  credentials: 'include',

  body: JSON.stringify({

    from: '[email protected]',

    to: ['<[email protected]>'],

    signedByFullName: '',

    signedByCPRNumber: '',

    otherCompanyName: '',

    otherCompanyCVRNumber: ''
  })
})

}

What is the problem can you display the TextInputs or just need help to store the values? — MPN7
– MPN7, Commented Mar 21, 2019 at 15:01
@MPN7 I just need help to store the values. In fact I tried this to store values: this.state.foundtextfields.push(…) and call in view {this.state.foundtextfields}. It works this way but I am using a Modal and whenever I toggle it, textinputs duplicates. I dont know why! — showtime
– showtime, Commented Mar 21, 2019 at 15:17
Where are you doing this this.state.foundtextfields.push(…)? if you are doing it in the Modal it self it's normal that it duplicates — MPN7
– MPN7, Commented Mar 21, 2019 at 15:23
@MPN7 Nono modal is inside another function's return View. Still, it doesnt make sense why is it doing it. It seems like everytime I toggle Modal, it refreshes the page, thus my fetch() calls data again + data that are already saved in state, therefor they are so many displaying. — showtime
– showtime, Commented Mar 21, 2019 at 15:27

MPN7 · Accepted Answer · 2019-03-22 11:07:26Z

2

To store the values you can create an array along side foundtextfields with the values, and every time you change a text you set it to the index of the other array
Like so:

    foundTextFields.push(
      <TextInput 
         onChangeText={(text) =>{
            let inputValues=this.state.inputValues;
            inputValues[i]=text;
            this.setState({inputValues})
         }}>
        {keyvalue_to_json.inputFields[i].placeholderText}
      </TextInput>)

OR

foundTextFields.push(
      <TextInput 
         onChangeText={(text) =>{
            keyvalue_to_json=this.state.keyvalue_to_json
            keyvalue_to_json.inputFields[i].inputValues=text;
            this.setState({keyvalue_to_json})
         }}>
        {keyvalue_to_json.inputFields[i].placeholderText}
      </TextInput>)

edited Mar 22, 2019 at 11:07

answered Mar 21, 2019 at 15:33

MPN7

1,3781 gold badge14 silver badges18 bronze badges

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

10 Comments

showtime Over a year ago

If I want to loop through that array in the State, how can I identify to which TextInput does each value belongs to?

MPN7 Over a year ago

Cicle through your API array keyvalue_to_json.inputFields, the values of input are in the same index as that array. If that confuses you, see edit i set the input values to the keyvalue_to_json.inputFields so it has all values

showtime Over a year ago

Because you are not initializing inputFields anywhere, and you are not setting state.

showtime Over a year ago

Maybe you misunderstood. I want to loop through state of that array, from another function. I have a function called postToApi() and there I want to loop through the state. Check Edited question.

MPN7 Over a year ago

I'm not sure if I understood but let me explain: The second way uses the variable of your array json that came from your api call. From the code you provided I believe you are doing an loop and for each element of keyvalue_to_json.inputFields you create a new inputBox, so instead of creating a new variable I set the values of the inputs to the original, api variable (keyvalue_to_json.inputFields), I don't set state 'cus I thought that keyvalue_to_json.inputFields wasn't on state since you were having problems with state.

|

Collectives™ on Stack Overflow

Save state of TextInput array - React Native

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related