setState update object property React Native-CodePudding

I'm using a increment and decrement button,

I'm directly using the code instead of adding the package - here is the code link

My Array Format

[
{
  "id": "0.287635530963835",
  "item_name": "Item 2",
  "item_price": "56",
  "item_qty": "1"
}, {
  "id": "0.625240011345925",
  "item_name": "Item 23",
  "item_price": "23",
  "item_qty": "1"
}
]

The IDBtn

items.map((item, i) => {
                            return (
                                <View key={item.id}>
                                    <TouchableOpacity style={styles.mainitems} >
                                        ...
                                        <View style={styles.mainitems3}>
                                            <View style={{flexDirection: 'row'}}>
                                                ...
                                                <IDBtn val={item.item_qty} minVal={1} /> //<---here
                                            </View>
                                            ...
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            )
                        })
                    }

SO i want to update this item item_qty if increment or decrement inside my setState, but don't know how to do this

CodePudding user response：

I was unable to dig deep into your issue.

But from the looks of it, I think you need to change your item_qty from a string to an int.

Or use parseInt on your current "item_qty".

So your current code should be changed as follows

<IDBtn val={parseInt(item.item_qty)} minVal={1}

and then your changeValue(value 1); inside rnIncrementDecrementBtn.js should be able to handle it I guess. Hope I understood your problem and this was what you were looking for.

CodePudding user response：

Let me first summarize how I have understood your issue. You have a state called items that contains an array containing objects with a property named item_qty which is a number. You want to iterate over this state array and create a button for each of these objects. The button contains the exact same code as provided from the component of the Github repository you have provided in your question. You have renamed this button to IDBtn. This button provides the functionality to increment or decrement a number.

Now, since you have an array in your state, you need this component to update the individual values inside that state without changing the others.

If you look closely at the component, you will notice that it uses an inner state to handle this functionality.

However, the component also provides a callback function named handleClick which will pass the updated value back to the parent component (thus you receive the either incremented or decremented value).

We know need to update our parent state object using this callback function. I am not sure why you are wrapping IDBtn inside a TouchableOpacity since you are not using its onPress callback. If you want to have the visual effect it provided, I would suggest that you change this in IDBtn directly. I have removed it here.

Notice that we provide the index to handleClick in order to update the correct value.

const [items, setItems] = React.useState([])

// fetch data and setItems initially
...

// notice  that onClick will receive the udpated value from the component 
// and we pass the index to it as well in order to update the correct 
// value for our inner state
function onClick(val, index) {
   setItems(previous => previous.map((item, idx) => index === idx ? {...item, item_qty: val} : item))
}

items.map((item, i) => {
    return (
        <View key={item.id}>
            <View style={styles.mainitems} >
              ...
                 <View style={styles.mainitems3}>
                    <View style={{flexDirection: 'row'}}>
                       ...
                       <IDBtn handleClick={(val) => onClick(val, i)} val={parseInt(item.item_qty)} minVal={1} />
                     </View>
                       ...
                 </View>
         </View>
     )
 })
}