Reputation: 1195
I'm trying to create a hierarchical menu selection component with 3 levels.
The structure is like this:
CategoryLv0
-->CategoryLv1
---->CategoryLv2
After clicking on a CategoryLv0
node and the initial render of the CategoryLv1
nodes finishes everything is fine. The issue I'm having is when I then click on a CategoryLv1
node it should send an updated prop from the parent component down the component chain to trigger componentWillReceiveProps
at the CategoryLv1
level. This would setState
and render the CategoryLv2
branch from that node. However the componentWillReceiveProps
hook for CategoryLv1
is never called for some reason. The first level (CategoryLv0
) works as expected and receives updated props allowing me to setState
in it's componentWillReceiveProps
to trigger a rerender. It seems like the subsequent levels should work as lv0 works but that's not the case.
I've included an expo snack so you can see it in action.
EDIT The snack has been updated to remove redundant state in the child components, componentWillReceiveProps and ADD extraData={this.props} to the flatLists Expo Snack of ComponentSelectionComponent
<div data-snack-id="SkcBrXsMG" data-snack-platform="android" data-snack-preview="true" data-snack-theme="dark" style="overflow:hidden;background:#212733;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>
Upvotes: 0
Views: 509
Reputation: 1195
Travis pointed me in the right direction.
The answer is that I needed to use the extraData
prop in the child component's FlatList
. Without it, it didn't know to rerender.
So since I am passing a master state of the menu as a prop to the child component, I set extraData={this.props}
to access the state. And it works!
Upvotes: 1