How do I display the numbers 0 to 10 in react native without repetition each time I click on the output?

Question

I want the numbers 0 to 10 to be repeated only once and then start counting from 0 to 10 again.

enter image description here

import React, {Component} from 'react';

import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';

import Ionicons from 'react-native-vector-icons/Ionicons';

export class CertificationScreen extends Component{
  constructor(props) {
    super(props);
  }


  render() {
    const count = 0;

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="light-content" />
          <View style={styles.item}>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('Forms', {itemId: count + 1 })}>
            <Ionicons style={styles.icons} name="arrow-back" size={24} color="#0064FE" />
            <Text style={{fontSize: 24}}>Text</Text>
            </TouchableOpacity>
          </View>
    </SafeAreaView>
  );}
}

I researched a lot, but I could not solve this problem. please guide me.

Yes, this is exactly what I want, to add a number by tapping TouchableOpacity. And send this data to my class component via props (itemId). But after making changes, I get this error: Too many re-renders. React limits the number of renders to prevent an infinite loop. Do you know a better way I can use it?

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

export function CertificationScreen() {

let [counter, setCounter] = React.useState();
       if (counter < 10) {
      setCounter(prev => prev + 1);

      } else {
        setCounter(0);
      }
    return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="light-content" />
          <View style={styles.item}>
          <TouchableOpacity onPress={() => 
               navigation.navigate('Forms', {itemId: setCounter })}>
            <Ionicons style={styles.icons} name="arrow-back" size={24} color="#0064FE" />
            <Text style={{fontSize: 24}}>Text</Text>
            </TouchableOpacity>
          </View>
    </SafeAreaView>
  );

 }

enter image description here

This is exactly what I want:

let [counter, setCounter] = React.useState ();
         if (counter <10) {
        setCounter (prev => prev + 1);

        } else {
          setCounter (0);
        }

After clicking on touchableOpacity, I want the data from the counter to be transferred via prop and navigation to the next page where the data is displayed in .

enter image description here

I created a snack example to better understand this issue, please let me know if there is an error in the process.

https://snack.expo.dev/@devsaeedhabibi/certification

Update: How can I integrate Button and TouchableOpacity?

          <Button title='Certification' onPress={() => {
  if(counter < 10) {
  setCounter(prev => prev + 1)

  }else {
    setCounter(1)
  } 
  
  }} />
    <TouchableOpacity onPress={() => navigation.navigate('Forms', {itemId: counter })}>
        <Ionicons style={styles.icons} name="arrow-back" size={24} color="#0064FE" />
        <Text style={{fontSize: 24, alignSelf: 'center'}}>Certification</Text>
        </TouchableOpacity>

Take a look at this snack: https://snack.expo.dev/@devsaeedhabibi/certification-2

Edit:

Using a Pressable component solved the problem.

    <Pressable onPressIn={()=> {if(counter < 10) {setCounter(prev => prev + 1)}else{setCounter(1)}}}
               onPress={() => navigation.navigate('Forms', {itemId: counter })}>

onPressIn: Called immediately when a touch is engaged, before onPressOut and onPress.

onPressOut: Called when a touch is released.

onPress: Called after onPressOut.

This is exactly what I wanted.

Take a look at this snack:

https://snack.expo.dev/@devsaeedhabibi/certification-v3

Thank you for your attention to this matter.

Answer 1

I think this is what you want;

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

const App = () => {
    let [counter, setCounter] = useState(0)
    return (
        <View>
            <Button title='counter' onPress={() => {
                if (counter < 10) {
                    setCounter(prev => prev + 1)
                } else {
                    setCounter(0)
                }
            }}/>
            <Text>{counter}</Text>
        </View>
    )
}

export default App;