0

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!

1
  • Você tem que fazer a lógica no componente pai.
    – novic
    8/03/2020 às 1:34

2 Respostas 2

1

Eu faria no componente <Pai /> a lógica do valor e do evento de atualizar para que isso seja compartilhado pelo componente <Filho /> como exemplo abaixo:

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>

Essa é uma ideia inicial e simples pelas informações da sua pergunta.

0

Há diversas maneiras de resolver isso. Uma delas seria criando um state no componente pai e passando pro filho através das props, outra forma comum seria fazer atraves de context, passando através de props seu componente ficaria parecido com isso:

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>
  );
}

e por fim no componente Counter

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>
    </>
    )

}

Espero ter ajudado!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .