CODEWITHSUNDEEP
reactjsreact-hooksuse-state
Dhaval Javia
Dhaval Javia

Reputation: 113

useState not updating state as only 0 and 1

I have code that updates the quantity when + is pressed by 1. but when i console.log the variable, it only updates from 0 to 1. and if any other initial value is set, it does not update it. Can anyone help out here.

import React, { useState } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'

const SubscriptionQuantity = () => {
    const [quantity, setQuantity] = useState(10) //Whatever i set it only sets it to 1. If i set it to 0 then its 0.

    return (
        <View>
            <View style={styles.quantityView}>
                <TouchableOpacity
                    style={quantity > 1 ? styles.quantityCircle : styles.quantityCircleDisabled}
                    onPress={quantity > 1 ? setQuantity(quantity - 1) : null}
                    disabled={quantity > 1 ? false : true}
                >
                    <Text style={styles.buttonText}>-</Text>
                </TouchableOpacity>
                <Image source={require('../../assets/images/Render_New_Label04_Revised.png')}
                    resizeMode="contain"
                    height={null}
                    width={null}
                />
                <TouchableOpacity
                    style={styles.quantityCircle}
                    onPress={() => {
                        let temp = quantity
                        temp += 1
                        console.log(temp)
                        setQuantity(temp)
                    }}
                >
                    <Text style={styles.buttonText}>+</Text>
                </TouchableOpacity>
            </View>

            <View style={styles.quantityView}>
            //Here quantity is shown as 0 or 1. not increasing at all.
                <Text>Qty.= {quantity} </Text>
                <Text>1 Ltr = ₹ <Text>70.00</Text></Text>
            </View>
        </View>
    )
}

export default SubscriptionQuantity

Upvotes: 1

Views: 1170

Answers (3)

Manuel Tumiati
Manuel Tumiati

Reputation: 96

I think it's better if we explain why the solution proposed by @bymax works.

Previous code (not working):

return (
//...
  <TouchableOpacity
      style={quantity > 1 ? styles.quantityCircle : styles.quantityCircleDisabled}
      onPress={quantity > 1 ? setQuantity(quantity - 1) : null}
      disabled={quantity > 1 ? false : true}
  >
      <Text style={styles.buttonText}>-</Text>
  </TouchableOpacity>
)

The problem is in the onPress prop. You are not passing a function, but instead you are passing the result of setQuantity(quantity -1) invocation or null. What is happening is that each render is invoking that function and passing the result as the onPress prop of the TouchableOpacity component.

The plus button, instead, was better:

return(
  //...
  <TouchableOpacity
     style={styles.quantityCircle}
     onPress={() => {
        let temp = quantity
        temp += 1
        console.log(temp)
        setQuantity(temp)
      }}
  >
      <Text style={styles.buttonText}>+</Text>
  </TouchableOpacity>
)

Even it's not a clean solution, this code is working because you are passing a function to the onPress prop of the TouchableOpacity component.

The solution proposed by @bymax is a lot cleaner and easy to read, so I suggest you to use the same approach.

Upvotes: 1

Halil İbrahim &#214;zdoğan
Halil İbrahim &#214;zdoğan

Reputation: 597

Could you try the below example in order to increase quantity?

 setQuantity(prevQuantity => prevQuantity + 1);

Upvotes: 0

michael
michael

Reputation: 4173

Please try this.

import React, { useState } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'

const SubscriptionQuantity = () => {
    const [quantity, setQuantity] = useState(10) //Whatever i set it only sets it to 1. If i set it to 0 then its 0.
    const onMinus = () => setQuantity(prev => (prev > 1 ? (prev - 1) : prev));
    const onPlus = () => setQuantity(prev => prev + 1);

    return (
        <View>
            <View style={styles.quantityView}>
                <TouchableOpacity
                    style={quantity > 1 ? styles.quantityCircle : styles.quantityCircleDisabled}
                    onPress={onMinus}
                    disabled={quantity > 1 ? false : true}
                >
                    <Text style={styles.buttonText}>-</Text>
                </TouchableOpacity>
                <Image source={require('../../assets/images/Render_New_Label04_Revised.png')}
                    resizeMode="contain"
                    height={null}
                    width={null}
                />
                <TouchableOpacity
                    style={styles.quantityCircle}
                    onPress={onPlus}
                >
                    <Text style={styles.buttonText}>+</Text>
                </TouchableOpacity>
            </View>

            <View style={styles.quantityView}>
            //Here quantity is shown as 0 or 1. not increasing at all.
                <Text>Qty.= {quantity} </Text>
                <Text>1 Ltr = ₹ <Text>70.00</Text></Text>
            </View>
        </View>
    )
}

export default SubscriptionQuantity

Upvotes: 1

Related Questions