CODEWITHSUNDEEP
javascriptreact-native
zedArt
zedArt

Reputation: 485

fill an array with json when user click on a button

I have to let user make a choice between products (p1, p2,...) with a react native picker (on android) and then he had to set quantity of chosen product with a TextInput, and then I have to show him after clicking Add button which product he chose, and after each Add click a new item of product and his quantity is shown :

Image

I don't know how to set data (productId and quantity) in an array or JSON

this is a part of code: 

 constructor(props){
    super(props)
    this.state = {
      valueP: '',
      quantity: '',
    }}
...
<View style={Styles.type12Container}>
                  <View style={Styles.inputContainer}>
                    <Picker
                      value={this.state.valueP}
                      style={Styles.picker}
                      mode= "dropdown"
                      prompt= "XXX"
                      selectedValue = {this.state.valueP}
                      onValueChange = {(val) => { this.setState({valueP: val}}}>
                      <Picker.Item label="P 1" value="1" />
                      <Picker.Item label="P 2" value="2"/>
                      <Picker.Item label="P 3" value="3" />

                    </Picker>
                  </View>
                  <View style={Styles.inputContainer}>
                  <TextInput
                    value={this.state.quantity}
                    style={Styles.inputStyle}
                    onChangeText={(val) => this.setState({quantity: val})}
                  />
                  </View>

                  <View style={Styles.button1Container}>
                    <TouchableOpacity
                    onPress={this.addConv}
                    style={Styles.buttonAdd}>
                      <Text style={Styles.button1Text}>Add</Text>
                    </TouchableOpacity>
                  </View>

                  <View style={Styles.output}>
                    <View>
                      <Text style={Styles.button1Text}>products and quantity items</Text>
                    </View>
                  </View>
              </View>

can you please suggest me a solution or a similar example

Upvotes: 1

Views: 164

Answers (1)

Maciej B. Nowak
Maciej B. Nowak

Reputation: 1215

I'm not entirely sure what you are asking, but my guess is that you are struggling to render a list of items added by the user. In order to do that you need to store them somewhere - for simplicity's sake let's store them in the component's state.

You did not provide what this.addConv does, but I will assume that it's implementation is correct.

...
constructor(props) {
  super(props);
  this.state = {
    ...,
    items = []
  }
}
...
this.addConv = () => {
  const newItem = {
    id: this.state.valueP,
    quantity: this.state.quantity
  };
  this.setState(state => ({
    items: state.items.concat([newItem])
  }));
}
...
render() {
...
<View style={Styles.output}>
  <View>
    {this.state.items.map(item => (
      <Text style={Styles.button1Text}>{this.getProductName(item.id)} - {item.quantity}</Text> // or whatever you want to do with this
    ))}
  </View>
</View>
...

Is this what you are asking?

Upvotes: 1

Related Questions