fill an array with json when user click on a button

Question

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 :

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

Please post your current code so that we can work with it. Otherwise you'll only get general answers which may not apply to your current code. — Federico klez Culloca
– Federico klez Culloca, Commented Dec 3, 2019 at 13:21
Please provide block of code which you have tried, also try to add more technical detail — Darpan Rangari
– Darpan Rangari, Commented Dec 3, 2019 at 13:25
@zedArt that's not where it's supposed to go, you should add it to your question. — Federico klez Culloca
– Federico klez Culloca, Commented Dec 3, 2019 at 13:25

Maciej B. Nowak · Accepted Answer · 2019-12-03 14:12:42Z

1

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?

edited Dec 3, 2019 at 14:12

answered Dec 3, 2019 at 13:53

Maciej B. Nowak

1,23510 silver badges19 bronze badges

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

8 Comments

zedArt Over a year ago

Im asking for how to add data (product and quantity) to each item. Actually what doSomethingWithTheData(event) do ? I don't not how get this data and store it in item5[ ]

Maciej B. Nowak Over a year ago

Well, that depends on what you want to render. Your component have two state fields: quantity and rather enigmatic valueP. I assume you want to display the item's information based on that. However valueP is just a string representing a number, nothing meaningful.

zedArt Over a year ago

yes valueP get value from picker, but it change everytime user chose another product it will change so I don't have to show it

Maciej B. Nowak Over a year ago

I've edited my answer with a generic example of what you can do that with the data. this.getProductName assumes that you don't want to display just a number, but the actual name of the product, based on valueP.

Maciej B. Nowak Over a year ago

Once the user click's 'Add', the item is added to the state with the currently chosen values, so later changes won't affect what's shown for this specific item. I hope I get you right.

|

Collectives™ on Stack Overflow

fill an array with json when user click on a button

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related