display value inside of looped react native code that has changed with onPress

Question

What I am trying to do is repeat a line item and the user will be able to change the quantity of each item on the line. for example

Soda ............ - 1 +
Breadsticks .. - 0 +
etc... ............. - 3 +

so far I have been able to change value and log that the change is happening, but the value that is displayed does not change.

below is what I have so far

render() {

    let pizzaSides = this.props.pizzaSidesArray.map((sidesObj) => {

      sidesObj.count = 0;

decrement function to reduce the count of the item but not below 0.

        decrement = () =>{
          console.log('dec');
          console.log(sidesObj);
          if (sidesObj.count > 0) {
            sidesObj.count--;
          }
        }

Increment adds when invoked

        increment = () =>{
          console.log('inc');
          console.log(sidesObj);
          sidesObj.count++;
        }

        return (
          <View 
             key={sidesObj.name} 
             style={{
                  paddingTop: 10, 
                  flex: 1, 
                  flexDirection: 'row', 
                  alignItems: 'center',
                  justifyContent: 'space-between'}}>

            <View style={{flex:1.5,flexDirection: 'row'}}>
              <TouchableHighlight
                onPress={ decrement}
                style={{flex:1}}>
                <Text> - </Text>
              </TouchableHighlight>

although the touchable highlights log the change the text below does not change

              <Text style={{flex:1}}>
                {sidesObj.count}
              </Text>

              <TouchableHighlight
                onPress={ increment}
                style={{flex:1}}>
                <Text> + </Text>
              </TouchableHighlight>
            </View>

          </View>
        );
    });

    return (
        <View>

          {pizzaSides}
        </View>

    )
}

}

Thanks for your help. :D

score 0 · Accepted Answer · answered Apr 13 '17 at 22:12

0

You need to store your value in the state. Take a look at the React documentation

answered Apr 13 '17 at 22:12

Antoine Grandchamp

7,195
3
28
34

Antone thanks for the tip. Perhaps I am still missing something. I have changed the code to update the count value in the array that is stored in redux, and changed the value in the to access that value from the store, yet it still does not change what is displayed from the initial value. – BJax Apr 14 '17 at 15:24
What is interesting is now the values will show up when my doc hot reloads. So perhaps I need to trigger the element to re render somehow. – BJax Apr 14 '17 at 15:35
Could you send the code you use to set and the code to set the value ? When you change the state in Redux, it should re-render by itself. – Antoine Grandchamp Apr 14 '17 at 17:52
Sure thing. Here is the file that I currently have in a JS Fiddle https://jsfiddle.net/pwzgzhh6/ – BJax Apr 15 '17 at 21:44
When I added the forceupdate it worked. Thanks again for your help. – BJax Sep 25 '17 at 16:02

score 0 · Answer 2 · edited May 23 '17 at 12:17

In addition to what @Antone Grandchamp said.

In your component, you can call this.forceUpdate() to force a rerender.

Documentation: https://facebook.github.io/react/docs/component-api.html

If I was not using Redux, but was using the default state handling then calling this.setState() would also cause it to re render.

The following question on StackOverflow was helpful.

Can you force a React component to rerender without calling setState?

display value inside of looped react native code that has changed with onPress

2 Answers2