Not able to render the data in input type on button click

Question

I am very new in react native . i am building a module which increment the state hook variable and render it in my input , but the counter did't render it after 1,meanz when i click on plus button it increment the counter to 1 but after that if i re-press the plus button it did't change the value 1 to 2. here is my code snippet of my input and plus button.

<View style={{flex:1 ,flexDirection: 'row', backgroundColor: '#ebedf087',width: '100%' }} >
    <View >
      <Pressable onPress={ () => { addQtyItem( loadName , cardId ) } } style={{backgroundColor: Colors.primary,padding: 8}}>
            <Icon name='plus' type='font-awesome' style={{fontSize: 25,color: 'white', textAlign: 'center'}} />
      </Pressable>
    </View>
    <View style={{width: 87}}>
        <TextInput value={ (UpdateQtyofItem[loadName+'__'+cardId] != undefined) ? (UpdateQtyofItem[loadName+'__'+cardId].value).toString() : '0' } key={cardId} onChangeText={(value) => { getinputValue( loadName , cardId , value ) }} placeholder="Qty" style={{textAlign: 'center'}} />
    </View>
    <View style={{backgroundColor: 'red',padding: 8}}>
        <Icon name='minus' type='font-awesome' style={{fontSize: 25,color: 'white', textAlign: 'center'}} />
    </View>
</View>

code snippet of addQtyItem function.

const [ UpdateQtyofItem , setUpdateQtyofItem] = useState({});
function addQtyItem(loadName , cardId){
    let loadedName = loadName+'__'+cardId;

    if( selectedLoadArray[loadedName] != undefined ){
        selectedLoadArray[loadedName].value = (selectedLoadArray[loadedName].value+1);
    }else{
        selectedLoadArray[loadName+'__'+cardId] = {'value' : 1 ,'cardId' : cardId};
    }
    setUpdateQtyofItem(selectedLoadArray)

}

Maybe it's just me, but I find it very hard to follow and to identify the problem. It would help if you could provide a 'working' example on snack.expo.io or another code sandbox. That shouldn't be too hard as it is not much code. I assume there is no re-render after updating your state right? — m_wer, Apr 30 '21 at 12:31
Yeah sir, that's right. After updating state data is updated in console but not rendered in input. — sandeep, Apr 30 '21 at 14:36

score 0 · Answer 1 · answered Apr 30 '21 at 12:27

0

Try this

const [ UpdateQtyofItem , setUpdateQtyofItem] = useState({});
function addQtyItem(loadName , cardId){
    let loadedName = loadName+'__'+cardId;

    if( selectedLoadArray[loadedName] != undefined ){
        let temp={...selectedLoadArray[loadedName]} 
        temp.value = (temp.value+1);
        selectedLoadArray[loadedName]=temp
    }else{
        selectedLoadArray[loadName+'__'+cardId] = {'value' : 1 ,'cardId' : cardId};
    }
    setUpdateQtyofItem(selectedLoadArray)

}

This problem with shallow comparison.

answered Apr 30 '21 at 12:27

kamal verma

496
3
16

Thanks for answer. Can you please elaborate the shallow comparison. – sandeep Apr 30 '21 at 14:35
Please follow this link https://stackoverflow.com/questions/36084515/how-does-shallow-compare-work-in-react#:~:text=shallow%20comparison%20is%20when%20the,for%20e.g. – kamal verma May 01 '21 at 05:59

Not able to render the data in input type on button click

1 Answers1