How to update the array - ReactNative

Question

What I'm trying to achieve is an Array like this

infos = [{type: 'phone', val: '2222222'}
           {type: 'email', val: '[email protected]'}]

Here is the state

constructor(props) {
super(props);
this.state = {
  rows: [], //this is used for the add component 
  contactDetails: [{type: '', val: ''}], // where i will add the values 
};
}

So I have a two TextInput

<View>
  <TextInput label='Type'/>
  <TextInput label='Details'/>
</View>

This View can be dynamically added when a button is clicked and can also be deleted. Here is my code for the add and delete button:

addRow(){
 this.state.rows.push(index++)
 this.setState({ rows: this.state.rows })
}

deleteRow(key){
 this.state.rows.splice(key, 1)
 this.setState({ rows: this.state.rows })
}

<TouchableOpacity onPress={ this.addRow.bind(this) } >
   <Text style={{textAlign: 'center',}}>Add</Text>
</TouchableOpacity>

 ...

 <TouchableOpacity  onPress={ () => this.deleteRow(i) } >
   <Image source={require('./../img/delete.png')} style={{width:32, height: 32 }} />
 </TouchableOpacity>

How can I get the value of it correctly and add it to my Array? Thank you.

Update

In my TextInput I tried doing this

<TextInput 
                    onChangeText={(text)=>{
                      let cd = this.state.contactDetails;
                      cd[i].val = text ;
                      this.setState({cd});

                    }}
                    value={this.state.contactDetails[i]}
                    label='Details' 
                    />

but I'm always having an error undefined is not an object (evaluating 'cd[i].val = text')

Samuli Hakoniemi · Accepted Answer · 2017-04-04 07:20:53Z

1

You can't manipulate state by declaring this.state.rows.push(index++), but you must do it with concat() and return the value to new variable. For instance (I actually don't know what index represents in your case, but let's give it a try:

addRow() {
 const rows = this.state.rows.concat(index++)
 this.setState({rows})
}

Here's a working example what I assume you're trying to achieve: https://snack.expo.io/HySVtag6g

edited Apr 4, 2017 at 7:20

answered Apr 4, 2017 at 7:12

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

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

1 Comment

natsumiyu Over a year ago

i only use the rows array for the component that shows the type and value. i have another array which is the contactDetails where i wanted to save the type and value inputted in the text input

natsumiyu · Accepted Answer · 2017-04-06 07:29:36Z

0

In my state, I added an array like this

info: {
    type: '',
    val: '',
  }

And then I added this to my addRow

addRow(){
//add new array in contactDetails
var arrayvar = this.state.contactDetails.slice()
arrayvar.push(this.state.info)
this.setState({ contactDetails: arrayvar })

//add new component row
this.state.rows.push(index++);
this.setState({ rows: this.state.rows});
}

Where every time the add button is clicked the Array named info with empty values will be added to the contactDetails and then I update the values of the added array.

answered Apr 6, 2017 at 7:29

natsumiyu

3,2579 gold badges35 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to update the array - ReactNative

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related