Hide all other same child component in click of one child component - reactjs

Question

I created a custom Picker component using Touchable Opacity and Picker. On click of touchable opacity component, the related Picker toggles. I am using this component multiple time in one parent with different data.
Picker's toggle state isPickerOpen defined and used in the child component to reduce the complexity of state management in the parent component. I'm required to click on each touchable opacity to show and hide its related Picker.
Here is the code of child component:
function CustomPicker(props) {
const {listItem, callbackParent} = props;
const [isPickerOpen, setPickerOpen] = useState(false);
const pickerListItem = listItems.map((item, i) => {
return <Picker.Item key={i} label={item.text} value={item.value} />
});
return (
<View>
<TouchableOpacity style={styles.pickerButton}
onPress={() => setPickerOpen(!isPickerOpen)}>
<Text>Title</Text>
</TouchableOpacity>
{isPickerOpen && <Picker onValueChange={(value) =>
callbackParent(value)}>
{pickerListItem}
</Picker>
}
</View>
);
}
And the parent component fraction:
<SelectionPicker listItems={list1} onPickerSelection={handleChange} />
<SelectionPicker listItems={list2} onPickerSelection={handleChange} />
<SelectionPicker listItems={list3} onPickerSelection={handleChange} />
How to manage the child component's state on click of touchable opacity, to hide all other open picker, and show just one related picker?

Answer 1

You need to add an external variable to have another form of validation for the Picker component, something like this:
function CustomPicker(props) {
const {
listItems,
onPickerClick,
onPickerSelection,
selectable = true,
name,
} = props;
//
const [isPickerOpen, setPickerOpen] = useState(false);
const pickerListItem = listItems.map((item, i) => {
return <Picker.Item key={i} label={item.text} value={item.value} />
});
return (
<View>
<TouchableOpacity
style={styles.pickerButton}
onPress={() => {
// calling our picker selection function
onPickerClick(name)
setPickerOpen(!isPickerOpen)
}}
>
<Text>Title</Text>
</TouchableOpacity>
{(isPickerOpen && selectable) && <Picker onValueChange={(value) =>
onPickerSelection(value, name)}>
{pickerListItem}
</Picker>
}
</View>
);
}
// Our selection handling function
handleSelection(name) {
this.setState({
currentPicker: name,
})
}
// Adding unique names, a validation prop, and a selection method
<SelectionPicker
name="someNameA"
selectable={'someNameA' === currentPicker}
onPickerClick={handleSelection}
onPickerSelection={handleChange}
listItems={list1}
/>
<SelectionPicker
name="someNameB"
selectable={'someNameB' === currentPicker}
onPickerClick={handleSelection}
onPickerSelection={handleChange}
listItems={list2}
/>
<SelectionPicker
name="someNameC"
selectable={'someNameC' === currentPicker}
onPickerClick={handleSelection}
onPickerSelection={handleChange}
listItems={list3}
/>