Value is not changing in React-Native-Numeric-Input

Question

I'm making a E-commerce application for my learning purpose. I was using textInput for update quantity in cart page And now I'm using react-native-numeric-input for that.

I'm updating the quantity onChange of react-native-numeric-input, It was working when I tested it normally but when I added my code to update quantity in my database it is not working properply... here I'm attaching the video of app's abnormal behavior: Visit link to watch video

this is my code of numeric input component:

<NumericInput
    totalHeight={35}
    totalWidth={80}
    validateOnBlur={false}
    initValue={qtyN}
    separatorWidth={0}
    rounded={true}
    textColor='#2e6153'
    borderColor='#0000'
    inputStyle={{
        backgroundColor: "#fff",
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    containerStyle={{
        backgroundColor: '#2e6153',
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    iconStyle={{
        color: '#fff',
    }}
    leftButtonBackgroundColor='#2e6153'
    rightButtonBackgroundColor='#2e6153'
    minValue={1}
    maxValue={999}
    onChange={(value) => this.qtyNumHandle(value, data.item.id)}
/>

and function I used on onChange:

qtyNumHandle = async (value, id) => {
    console.log("qtyNum handler");
    console.log(value)
    console.log(id)
    try{
        let user_id = await AsyncStorage.getItem(ID);
        console.log(user_id);
        let updateProduct = await fetch(`http://website.com/api/cart/updatecart?productid=${id}&userid=${user_id}&qty=${value}`, {
            "method": "POST",
            "headers": {
                "cache-control": "no-cache",
            },
        });
        let updateProductRes = await updateProduct.json();
        console.log(updateProductRes);
        this.fetchCartProduct();
    }catch(errors){
        console.log(errors);
    }
}

please tell me if I have done something incorrect. And if my code is correct so why this problem is occurring.

Ajay Sharma Ajay Sharma · Accepted Answer · 2019-05-29T07:11:13

Yeah..!! I got the solution.

The problem was I was not using the value prop.

Here is my new code of NumericInput:

<NumericInput
    value={this.state.cartTotal[data.index].qty}
    // above the state I've used is containing the array data of my cart products
    // and I used [data.index] because this NumericInput is in FlatList.
    // so to get the quantity of perticular I used it array[data.index].qty
    totalHeight={35}
    totalWidth={80}
    validateOnBlur={false}
    initValue={this.state.cartTotal[data.index].qty}
    separatorWidth={0}
    rounded={true}
    textColor='#2e6153'
    borderColor='#0000'
    inputStyle={{
        backgroundColor: "#fff",
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    containerStyle={{
        backgroundColor: '#2e6153',
        borderWidth: 1,
        borderColor: '#2e6153',
        borderStyle: 'solid',
    }}
    iconStyle={{
        color: '#fff',
    }}
    leftButtonBackgroundColor='#2e6153'
    rightButtonBackgroundColor='#2e6153'
    minValue={1}
    maxValue={999}
    onChange={(value) => this.qtyNumHandle(value, data.item.id)}
/>

and here is my function I used on onChange (this has no change):

qtyNumHandle = async (value, id) => {
    console.log("qtyNum handler");
    console.log(value)
    console.log(id)
    try{
        let user_id = await AsyncStorage.getItem(ID);
        console.log(user_id);
        let updateProduct = await fetch(`http://website.com/api/cart/updatecart?productid=${id}&userid=${user_id}&qty=${value}`, {
            "method": "POST",
            "headers": {
                "cache-control": "no-cache",
            },
        });
        let updateProductRes = await updateProduct.json();
        console.log(updateProductRes);
        this.fetchCartProduct();
    }catch(errors){
        console.log(errors);
    }
}

Hope this will help someone else.

Value is not changing in React-Native-Numeric-Input

1 Answers