CODEWITHSUNDEEP
javascriptreact-native
rt_
rt_

Reputation: 1195

React Native child component not receiving updated props

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

Answers (1)

rt_
rt_

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

Related Questions