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