Change State of Component called more than once

Question

I have this code that is a simple counter of Truco. I made a component to count and called him to both teams. When it reaches above 11 points the Zera component was straight. But how am I calling them "separately" how can I do to reset both? To change the States of the two Component calls?

export default function App() {



  return (
    <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 1}} colors={['#7159c1', '#9B49c1']} style={styles.container}>
      <SafeAreaView>
        <Text style={styles.title}>Contador Truco!</Text>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <View style={styles.areaOne}>
            <Text style={styles.textPlayer}>Nós</Text>
             <Counter/> 
          </View>
          <View style={styles.areaTwo}>
            <Text style={styles.textPlayer}>Eles</Text>
              <Counter/> 
          </View>
        </View>
        <TouchableOpacity onPress={() => {}}>
            < MaterialCommunityIcons name='plus-box' size={65} color='#FFF'/>
        </TouchableOpacity>
      </SafeAreaView>
    </LinearGradient>
  );
}

Component Counter:

export default function Counter () {

    const [valor, setValor] = useState(0)
        if(valor > 11){
          setValor(0)
        }
    console.log(valor)
    return(
    <>
        <Text style={styles.textPontos}>{valor}</Text>
        <TouchableOpacity style={styles.plusButton} onPress={() => setValor(valor + 1)}>
            < MaterialCommunityIcons name='plus-box' size={75} color='#FFF'/>
        </TouchableOpacity>
    </>
    )

}

Personal thank you!

Answer 1

I would do in the component <Pai /> the value and event logic of upgrading so that it is shared by the component <Filho /> as an example below:

function Filho({value, onClick}) {
  return (
    <div>
      <p>{value}</p>
      <button onClick={onClick}>Pressione</button>
    </div>
  )
}
function Pai() {
  const [value, setValue] = React.useState(0);
  const handleClick = () => {
    if (value > 10) {
      setValue(0);
    } else {
      setValue(value + 1);
    }
  }
  return (
    <div>
      <Filho value={value} onClick={handleClick} />
      <Filho value={value} onClick={handleClick} />
    </div>
  )
}

ReactDOM.render( <Pai/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

This is an initial and simple idea from the information of your question.

Answer 2

There are several ways to solve this. One of them would be to create a state the parent component and passing to the child through the props, another common way would be to do through context, passing through props your component would look like this:

export default function App() {
  const [counter, setCounter] = useState(0)

  function handleClick() {
    setCounter(previous => {
          if (previous.counter >= 11) {
             return 0
          }
           return ++previous.counter
      })
  }

  return (
    <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 1}} colors={['#7159c1', '#9B49c1']} style={styles.container}>
      <SafeAreaView>
        <Text style={styles.title}>Contador Truco!</Text>
        <View style={{flex: 1, flexDirection: 'row'}}>
          <View style={styles.areaOne}>
            <Text style={styles.textPlayer}>Nós</Text>
             <Counter/> 
          </View>
          <View style={styles.areaTwo}>
            <Text style={styles.textPlayer}>Eles</Text>
              <Counter counter={counter} onPress={handleClick} /> 
          </View>
        </View>
        <TouchableOpacity onPress={() => {}}>
            < MaterialCommunityIcons name='plus-box' size={65} color='#FFF'/>
        </TouchableOpacity>
      </SafeAreaView>
    </LinearGradient>
  );
}

and finally the Counter component

export default function Counter ({ value, onPress }) {
    return(
    <>
        <Text style={styles.textPontos}>{value}</Text>
        <TouchableOpacity style={styles.plusButton} onPress={onPress}>
            < MaterialCommunityIcons name='plus-box' size={75} color='#FFF'/>
        </TouchableOpacity>
    </>
    )

}

I hope I’ve helped!