useState-hook is not updating my state in an onPress() function - reactjs

Question

I am building a tab-view and I cannot figure out why the useState-hook is not updating my state. I am sure it is something easy, but I have been stumped here a while now...
I can see that the onPress function is fired and that item.label is the correct one if I log that out. However, setState does not change, even if I hardcode the parameter.
const TabContainer = ({ tabs }) => {
const [selected, setSelected] = useState('');
function renderItem(item, index) {
return item.label === selected ? (
<View style={styles.selectedTab}>
<CustomText style={styles.tabText}>{item.label}</CustomText>
</View>
) : (
<TouchableWithoutFeedback
key={index}
onPress={() => {
console.log(selected);
setSelected(item.label);
}}
>
<View style={styles.tab}>
<CustomText style={styles.tabText}>{item.label}</CustomText>
</View>
</TouchableWithoutFeedback>
);
}
return (
<View style={styles.tabContainer}>
<FlatList
keyExtractor={(item, index) => index.toString()}
data={tabs}
renderItem={({ item, index }) => {
return renderItem(item, index);
}}
style={styles.listContainer}
/>
</View>
);
};
export default TabContainer;

Answer 1

Try this :
<
TouchableWithoutFeedback
key={index}
onPress={() => onPressItem(item)}
>
const onPressItem =(item)=>{
setSelected(item.label)}

Answer 2

Sometimes, using useRef instead of useState when you want to set a value at a different stage in the lifecycle than the constructor.
Please take a look at this and try to implement this in your code:
[https://codesandbox.io/s/v6948pww5y?from-embed]

Answer 3

Okey I kinda solved this. I realized that I had to lift my state up for my tabs in order to render the other stuff properly. So then I just implemented in the same way in the parent component, and then it worked...
Important rows from parent:
const [selectedTab, setSelectedTab] = useState('');
function handleTabPress(tab) {
setSelectedTab(tab);
}
...
<TabContainer
tabs={[
{ label: 'Label 1' },
{ label: 'Label 2' },
{ label: 'Label 3' },
]}
selectedTab={selectedTab}
handleTabPress={handleTabPress}
/>
New child
const TabContainer = ({ tabs, selectedTab, handleTabPress }) => {
function renderItem(item, index) {
return item.label === selectedTab ? (
<View style={styles.selectedTab}>
<CustomText style={styles.selectedTabText}>{item.label}</CustomText>
</View>
) : (
<TouchableWithoutFeedback
key={index}
onPress={() => {
handleTabPress(item.label);
}}
>
<View style={styles.tab}>
<CustomText style={styles.tabText}>{item.label}</CustomText>
</View>
</TouchableWithoutFeedback>
);
}
return (
<View style={styles.tabContainer}>
<FlatList
keyExtractor={(item, index) => index.toString()}
data={tabs}
renderItem={({ item, index }) => {
return renderItem(item, index);
}}
style={styles.listContainer}
/>
</View>
);
};