[FIXED] How to make a variable change every time i insert a coin to reach a certain value?

Issue

So i have a coin box that collects coins and it recognize their value. I want to make the user be able to insert coin and pay a service that costs 2.0 €. The user can pay with coins from 2.0 € , 1.0 € , 0,50 € , 0,20 € , 0,10 €.

In my react-native now i created a function where if the coin reaches 2 euros the coin box stops (listener).

But how can i sum every time the user insert different coins of different values?

here is my code:

import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {
  Alert,
  DeviceEventEmitter,
  NativeEventEmitter,
  NativeModules,
  Pressable,
  StyleSheet,
  Text,
  View,
} from 'react-native';
const {CoinBoxCollector} = NativeModules;

export default function HomeScreen() {
  const [off, setOff] = useState(true);

  const navigation = useNavigation();
  let coinInserted = 0;
  const coinValueStartExperience = 2;
  let totalCoin;

  async function onCoinDetected(coin: any) {
    if (coinInserted >= coinValueStartExperience) {
      //navigation.navigate('VideoScreen');
      console.log("hai pagato per l' esperienza");
      return await CoinBoxCollector.stop();
    }

    if (coinInserted !== 0 || coinInserted < coinValueStartExperience) {
      console.log('DEVI INSERIRE ALTRI SOLDI');
      totalCoin = coinInserted + parseFloat(coin);

      // console.log('ricevuti ' + totalCoin + ' €');
    }
    // Alert.alert('ricevuti soldi', coin);
  }

  const pressInit = async () => {
    // setOff(false);
    return await CoinBoxCollector.initialize();
  };

  const pressStop = async () => {
    // setOff(false);
    console.log('getttoniera stoppata');
    return await CoinBoxCollector.stop();
  };

  useEffect(() => {
    const eventEmitter = new NativeEventEmitter(NativeModules.CoinBoxCollector);
    const eventListener = eventEmitter.addListener(
      'onReceivedCoin',
      onCoinDetected,
    );
    // return eventListener.remove();
  }, []);

  return (
    <View style={styles.container}>
      <Pressable style={styles.btn} onPress={pressInit}>
        <Text style={styles.btnText}>Initialize</Text>
      </Pressable>
      <Pressable style={styles.btn} onPress={pressStop}>
        <Text style={styles.btnText}>Stop it</Text>
      </Pressable>
      {/* <Pressable
        style={styles.btn}
        onPress={() => navigation.navigate('VideoScreen')}>
        <Text style={styles.btnText}>navigate</Text>
      </Pressable> */}
      {/* {!off && (
        <View>
          <Text>Bravo hai Pagato !</Text>
        </View>
      )} */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignContent: 'center',
  },
  btn: {
    marginTop: 30,
    backgroundColor: '#841584',
    width: '5%',
    height: 30,
    marginLeft: '48%',
  },
  btnText: {
    color: 'white',
    textAlign: 'center',
  },
});

thank you in advance for the answer

Solution

If I understand correctly what you want, you're going to need to use useState for this.

const [totalInserted, setTotalInserted] = useState(0);

// and then every time a coin is inserted you'd do
setTotalInserted((prev) => prev+amountInserted);

// you can get what as been inserted so far by looking at totalInserted

Answered By - Emilien
Answer Checked By - - Terry (ReactFix Volunteer)