Changing a parent state when a child component updates - react-native

Question

I have a main component, which has two child components, a flat list and a button group component (from react-native-elements).
I want to update the flat list data when a user taps on one of the button group options, however, I can't really figure this out, I tried to use callbacks, but couldn't really understand how they work, and it didn't work for me.
This is my main component:
return (
<SafeAreaView style={styles.homeContainer}>
<View style={{flex: 1}}>
<View style={styles.headerContainer}>
<View
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Text style={styles.title}>Groups</Text>
<Avatar
rounded
source={{
uri: profilePhotoURL,
}}
/>
</View>
<Text style={styles.subtitle}>Find people to learn with</Text>
</View>
<OptionChooser /> {/** <---- this is the button group component*/}
<FlatList
data={meetings}
renderItem={({item}) => (
<TouchableOpacity
style={styles.cardButton}
onPress={() =>
navigation.navigate('MeetingDetails', {meeting: item})
}>
<MeetingCard meetingModel={item} style={{flex: 1}} />
</TouchableOpacity>
)}
keyExtractor={(item) => item.id!}
showsVerticalScrollIndicator={false}
/>
</View>
<FloatingButton onPress={() => navigation.navigate('AddMeeting')} />
</SafeAreaView>
);
And this is my button group (OptionChooser) component:
const OptionChooser = () => {
const [selectedIndex, setSelectedIndex] = useState<number>(0);
const buttons = ['All', 'Today', 'This week'];
const updateIndex = (index) => {
setSelectedIndex(index);
console.log(index);
};
return (
<View style={styles.buttonGroupContainer}>
<ButtonGroup
onPress={updateIndex}
selectedIndex={selectedIndex}
buttons={buttons}
containerStyle={{height: 44, borderRadius: 4}}
selectedButtonStyle={{backgroundColor: '#8BCFB0'}}
/>
</View>
);
};
My goal is whenever updateIndex gets called in OptionChooser, to update the flat list in the parent component.

Answer 1

As you have said, callbacks would be the easiest option to use in the situation.
Lets start with your parent component.
Assume that you have two state variables meetings,selectedIndex
Its always a good idea to make the child component dumb and manage the state in parent rather than managing states in both.
Your parent would have the setSelectedIndex which would update the parent selectedIndex state.
so you pass the state and function to the child like below
<OptionChooser selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex}/>
And you child component will have to be like this
const OptionChooser = ({selectedIndex,setSelectedIndex}) => {
const buttons = ['All', 'Today', 'This week'];
return (
<View style={styles.buttonGroupContainer}>
<ButtonGroup
onPress={setSelectedIndex}
selectedIndex={selectedIndex}
buttons={buttons}
containerStyle={{height: 44, borderRadius: 4}}
selectedButtonStyle={{backgroundColor: '#8BCFB0'}}
/>
</View>
);
};
And in your render you can simply filter the meetings using this state like below
<FlatList data={meetings.filter(x=>x.type==selectedIndex)} ...
//actual condition may vary according to your need.
So whenever your child changes the changes would be reflected in parent.