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.

Answer 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.