Inserting data from array of objects to array React Native

Question

I am trying to get user input, create an array of objects from userInput and save that array of objects into an array. Below is code I have written, but no output.

    import React, { Component } from 'react';
import {Text, View, StyleSheet, TextInput, Image, TouchableOpacity, ListView} from 'react-native';
//import {Actions} from 'react-native-router-flux';

const count = 0;

export default class SecondPage extends Component {
constructor(props) {
    super(props);
    this.state = {
      quan:'',
      desc:'',
      amt:'',
      dataStorage :[],
      data: { quantity: this.quan, description: this.desc, amount: this.amt },
    }
  }

_add(){
  console.log('Add button pressed');
  this.state.dataStorage[count].push(this.state.data);
  console.log(this.state.data);
  count++;
}
render(){
return(
 <View style={styles.container}>
          <View style={styles.itemDescription}>
                <Text style={styles.itemDescriptionText}>QUANTITY</Text>
                <Text style={styles.itemDescriptionText}>DESCRIPTION</Text>
                <Text style={styles.itemDescriptionText}>AMOUNT</Text>
                <TouchableOpacity style={styles.addButton} onPress={this._add}>
                <Text style={styles.addButtonText}>ADD</Text>
                </TouchableOpacity>
          </View>
          <View style={styles.rowsOfInput}>
               <TextInput style = {styles.nameInput}
                      onChangeText={(text) => this.setState({quan: text})}
                      value = {this.state.quan}
                      autoCapitalize='none'
                      autoCorrect={false}
                      returnKeyType="next"
                      keyboardAppearance="dark"
                />
                <TextInput style = {styles.nameInput}
                      onChangeText={(text) => this.setState({desc: text})}
                      value = {this.state.desc}
                      autoCapitalize='none'
                      autoCorrect={false}
                      returnKeyType="next"
                      keyboardAppearance="dark"
                />
                <TextInput style = {styles.nameInput}
                      onChangeText= {(text) => this.setState({amt: text})}
                      value = {this.state.amt}
                      autoCapitalize='none'
                      autoCorrect={false}
                      returnKeyType="next"
                      keyboardAppearance="dark"
                />

          </View>     
 </View>

)}
}


const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
  },
  itemDescription: {
        marginTop:20,
        backgroundColor:'#00CED1',
        flexDirection:'row',
        justifyContent:'space-between',

    },

    itemDescriptionText:{
      fontSize:12,
      color:'white',
    },

    addButton:{
    borderWidth:1,
    height:20,
    borderRadius:5,
    overflow:'hidden',
    backgroundColor:'red',

  },
   addButtonText:{
    paddingLeft:10,
    paddingRight:10,

  },
    nameInput:{
    flex:1,
    height: 20,
    textAlignVertical:'bottom',
    paddingLeft: 5,
    paddingRight: 5,
    fontSize: 12,
    backgroundColor:'#E0FFFF',
  },
  hairLine:{
    height:1,
    backgroundColor:'black',
    marginTop:0,
    marginLeft:20,
    marginRight:20
  },
    rowsOfInput:{
     // flex:1,
      flexDirection:'row',
      justifyContent:'space-around'
    },
});

Whats wrong in the code? I want to store userInput for each entry into QUANTITY, DESCRIPTION, AMOUNT as array of object.

Bert · Accepted Answer · 2017-06-23 03:16:00Z

1

One of your issues is a scoping issue. Change your _add method to this.

_add = () => {
  let dataStorage = [{amt: this.state.amt, quan: this.state.quan, desc: this.state.desc}, ...this.state.dataStorage]
  console.log(dataStorage)
  this.setState({dataStorage})
}

Also, your data property on state will never work and is unnecessary.

Here is an example.

It still won't display anything because you do nothing with dataStorage.

edited Jun 23, 2017 at 3:16

answered Jun 23, 2017 at 3:07

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

Inserting data from array of objects to array React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related