estou com esse código que é um contador simples de Truco. Fiz um componente para contar e chamei ele para os dois times. Quando ele atinge acima de 11 pontos o componente zera certinho. Mas como estou chamando eles "separadamente" como posso fazer para zerar os dois? Para eu alterar os states das duas chamadas do component?
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>
</>
)
}
Obrigado pessoal!