Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

194
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!