Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

191
Visualizações
Make active or not active Text components

Hello I make an app in React Native !

I try to make three active or not active button. So i define a state with

const [activeLabel, setActiveLabel] = useState(0);

And on my Text compenent I have

activeLabel === 1 ? styles.selectedLabel : styles.notSelectedLabel
onPress={() => setActiveLabel(1)}

When I initialize I set activeLabel at 0 and when I click and other component with console.log activeLabel stay at 0.

I make something wrong ?

Thanks you !

Here my component Labels

function Labels({
  setDataNumber,
  title,
  color,
  firstLabel,
  secondLabel,
  thirdLabel,
}) {
  const [activeLabel, setActiveLabel] = useState(0);

  return (
    <View style={{ flexDirection: "row" }}>
      <Text style={{ color: color, fontSize: 20, margin: 10 }}>{title}</Text>
      <View
        style={{ flexDirection: "row", justifyContent: "flex-end", flex: 1 }}
      >
        <Text
          style={{
            color: color,
            borderColor: color,
            ...(activeLabel === 0
              ? styles.selectedLabel
              : styles.notSelectedLabel),
          }}
          onPress={() => setActiveLabel(0), () => setDataNumber(0)}
        >
          {firstLabel}
        </Text>
        <Text
          style={{
            color: color,
            borderColor: color,
            ...(activeLabel === 1
              ? styles.selectedLabel
              : styles.notSelectedLabel),
          }}
          onPress={() => setActiveLabel(1), () => setDataNumber(1)}
        >
          {secondLabel}
        </Text>
        <Text
          style={{
            color: color,
            borderColor: color,
            ...(activeLabel === 2
              ? styles.selectedLabel
              : styles.notSelectedLabel),
          }}
          onPress={() => setActiveLabel(2), () => setDataNumber(2)}
        >
          {thirdLabel}
        </Text>
      </View>
    </View>
  );
}
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

@sidharth-rathi offered me a solution!

function Labels({ setActiveLabel, title, color, activeIndex, labels = [] }) {
  return (
    <View style={{ flexDirection: "row" }}>
      <Text style={{ color: color, fontSize: 20, margin: 10 }}>{title}</Text>
      <View
        style={{ flexDirection: "row", justifyContent: "flex-end", flex: 1 }}
      >
        {labels.map((el, index) => (
          <Text
            style={{
              color: color,
              borderColor: color,
              ...(activeIndex === index
                ? styles.selectedLabel
                : styles.notSelectedLabel),
            }}
            onPress={() => setActiveLabel(index)}
          >
            {el}
          </Text> 
        ))}
      </View>
    </View>
  );
}
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda