如何让组件控制 React Native 中的同级组件？

Question

I'm a little new to React Native and making an app. There are three components I'm currently concerned with:

• AllList.js: A screen comprised of a search bar and a FlatList of RowCard.js instances.

• RowCard.js: a custom TouchableHighlight component that displays an item from an API, and currently returns an alert when tapped.

• drinkPopup.js: A custom Modal component that needs to take an ID from AllList but be controlled by tapping a RowCard.

I have the list of RowCard instances working, but I need to find a way to make the modal from drinkPopup appear when RowCard is tapped. I'm super confused as to how to approach this, since as far as I know props can only be sent from parent to child.

Any suggestions for how to do this? I've looked around to find answers but the results I've found have just been confusing.

Answer 1

So you need a state that will be accessible by both the drinkPopup and RowCard . The way to go is to keep it in their parent ( AllList ) and pass it accordingly.

So you Parent should be something like:

const AllList = () => {
    const [visibleModalId, setVisibleModalId] = useState(null)
    return <>
        <RowCard setVisibleModalId={setVisibleModalId}>
        <drinkPopup visibleModalId={visibleModalId}>
    </>
}

That way you can control the modal from RowCard (by calling setVisibleModalId there) and you also know if the drinkPopup should be visible (because it knows if the visibleModalId is null or not)