CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
Francislainy Campos
Francislainy Campos

Reputation: 4164

Update multiple states in React Native (increase counter for each component individually)

I've found a few similar questions on thit topic but they're usually about React and not React Native specifically and I'm finding it a bit difficult to translate them as very new to both coming from an Android/Java background. I've a component that holds a plus and a minus icon to increase/decrease their counter. This component is used multiple times however, and I don't want to have a total and a setTotal for each instance of this component so that each can have their own total updated independently of any of the other components. At the moment, they all update when I click any of the plus/minus signs. I'm using hooks.

const [total, setTotal] = useState(0)

const increase = () => {
    setTotal(total + 1)
}

const decrease = () => {
    setTotal(total - 1)
}

...

            <Reportable
                title={'First'}
                decrease={decrease}
                increase={increase}
                total={total}
                onPress={handleChange}
            />
            <Reportable
                title={'Second'}
                decrease={decrease}
                increase={increase}
                total={total}
            />

Thanks very much.

Upvotes: 0

Views: 1326

Answers (2)

Francislainy Campos
Francislainy Campos

Reputation: 4164

As per @edilsomm217's answer, this is a sample for what worked for me.

import React from 'react';
import { View, Button } from 'react-native';

export default function Reportable() {
  const [total, setTotal] = useState(0)

  const increase = () => {
    setTotal(total + 1)
    props.increase()
  }

  const decrease = () => {
    setTotal(total - 1)
    props.decrease()
  }

  return (
    <View>
      <Button onPress={increase} >Increment</Button>
      <Button onPress={decrease} >Decrement</Button>
    </View>
  );
}

Now import Reportable in the App.js like so:

import React from 'react';
import { View } from 'react-native';

import Reportable from './Reportable';

export default function App () {
  return (
    <View>

      {/* This is the first Reportable */}
      <Reportable 
       increase={increase}
       decrease={decrease}
       />

      {/* This is the second Reportable */}
      <Reportable
       increase={increase}
       decrease={decrease}
      />

    </View>
  );
}

So I can both update the total individually as also getting the amount combined for all the items together when doing something like <Text>{total}</Text> under either the Reportable.js file or App.js respectively.

Upvotes: 0

edilsonlm217
edilsonlm217

Reputation: 76

The problem is you are passing to both component the same state (total). So, it doesn't matter who had incremented it or decremented it... they will share the values because both are using same state.

If each component needs to be aware of how many times it was incremented, you should create a state for the component itself like so:

import React from 'react';
import { View, Button } from 'react-native';

export default function Reportable() {
  const [total, setTotal] = useState(0)

  const increase = () => {
    setTotal(total + 1)
  }

  const decrease = () => {
    setTotal(total - 1)
  }

  return (
    <View>
      <Button onPress={increase} >Increment</Button>
      <Button onPress={decrease} >Decrement</Button>
    </View>
  );
}

Now import Reportable in the App.js like so:

import React from 'react';
import { View } from 'react-native';

import Reportable from './Reportable';

export default function App () {
  return (
    <View>

      {/* This is the first Reportable */}
      <Reportable />

      {/* This is the second Reportable */}
      <Reportable />

    </View>
  );
}

Now, if you need to get each count in the App.js give us more detail about what you're trying to implement so we can come up with a solution that fits your problem.

Upvotes: 2

Related Questions