title: How to update prop values in Child class component when Parent class component state is changed? : React Native
body: <p>I have a parent class component called CardView.js which contains a child class component called Tab.js (which contains a FlatList).</p>
  <p>When a button is pressed in CardView.js, a modal appears with various options. A user chooses an option and presses 'OK' on the modal. At this point the onOKHandler method in the parent component updates the parent state (<code>tabOrderBy: orderBy</code> and  <code>orderSetByModal: true</code>). NOTE: These two pieces of state are passed to the child component as props.</p>
  <p><strong>Here is what I need:</strong></p>
  <p>When the onOKHandler is pressed in the parent, I need the child component to re-render with it's props values reflecting the new state values in the parent state. NOTE: I do not want the Parent Component to re-render as well.</p>
  <p>At the moment when onOKHandler is pressed, the child component reloads, but it's props are still showing the OLD state from the parent.</p>
  <p><strong>Here is what I have tried:</strong></p>
  <ul>
  <li>When the onOKHandler is pressed, I use setState to update the parent state and then I use the setState callback to call a method in the child to reload the child. The child reloads but its  props are not updated.</li>
  <li>I have tried using componentDidUpdate in the child which checks when the prop <code>orderSetByModal</code> is changed. This does not work at all.</li>
  </ul>
  <p>I have tried many of the recommendations in other posts like this - nothing works! Where am I going wrong please? Code is below:</p>
  <p>Parent Component: CardView.js</p>
  <pre><code>import React from &quot;react&quot;;
  import { View } from &quot;react-native&quot;;
  import { Windows} from &quot;../stores&quot;;
  import { TabView, SceneMap } from &quot;react-native-tab-view&quot;;
  import { Tab, TabBar, Sortby } from &quot;../components&quot;;
  
  class CardView extends React.Component {
    state = {    
      level: 0,
      tabIndex: 0,
      tabRoutes: [],
      recordId: null,    
      renderScene: () =&gt; {},
      showSortby: false,  
      orderSetByModal: false, 
      tabOrderBy: ''   
    };
  
    tabRefs = {}; 
  
    componentDidMount = () =&gt; {
      this.reload(this.props.windowId, null, this.state.level, this.state.tabIndex);     
    };
  
    reload = (windowId, recordId, level, tabIndex) =&gt; {     
      this.setState({ recordId, level, tabIndex });
      const tabRoutes = Windows.getTabRoutes(windowId, level);      
      this.setState({ tabRoutes });    
      const sceneMap = {};   
      this.setState({ renderScene: SceneMap(sceneMap)});    
    
      for (let i = 0; i &lt; tabRoutes.length; i++) {
        const tabRoute = tabRoutes[i];          
        sceneMap[tabRoute.key] = () =&gt; {        
          return (
            &lt;Tab
              onRef={(ref) =&gt; (this.child = ref)}
              ref={(tab) =&gt; (this.tabRefs[i] = tab)}
              windowId={windowId}           
              tabSequence={tabRoute.key}
              tabLevel={level}
              tabKey={tabRoute.key}
              recordId={recordId}                               
              orderSetByModal={this.state.orderSetByModal}            
              tabOrderBy={this.state.tabOrderBy}
            &gt;&lt;/Tab&gt;
          );
        };    
      }    
    };
   
    startSortByHandler = () =&gt; {
      this.setState({showSortby: true});    
    };
  
    endSortByHandler = () =&gt; {
      this.setState({ showSortby: false});    
    }; 
  
    orderByFromModal = () =&gt; {   
      return 'creationDate asc' 
    }
  
    refreshTab = () =&gt; {
      this.orderByFromModal();
      this.child.refresh() 
    }
  
    onOKHandler = () =&gt; {
      this.endSortByHandler();   
      const orderBy = this.orderByFromModal();    
      this.setState({     
        tabOrderBy: orderBy, 
        orderSetByModal: true}, () =&gt; {         
        this.refreshTab()        
      });        
    }
  
    render() {    
      return (      
        &lt;View&gt;         
          &lt;TabView
            navigationState={{index: this.state.tabIndex, routes: this.state.tabRoutes}}
            renderScene={this.state.renderScene}
            onIndexChange={(index) =&gt; {          
              this.setState({ tabIndex: index });            
            }}
            lazy
            swipeEnabled={false}         
            renderTabBar={(props) =&gt; &lt;TabBar {...props} /&gt;}
          /&gt;       
          &lt;Sortby
            visible={this.state.showSortby}
            onCancel={this.endSortByHandler}          
            onOK={this.onOKHandler}                
          &gt;&lt;/Sortby&gt;        
        &lt;/View&gt;   
      );
    }
  }
  
  export default CardView;
  </code></pre>
  <p>Child Component: Tab.js</p>
  <pre><code>import React from &quot;react&quot;;
  import { FlatList } from &quot;react-native&quot;;
  import { Windows } from &quot;../stores&quot;;
  import SwipeableCard from &quot;./SwipeableCard&quot;;
  
  class Tab extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        currentTab: null,
        records: [],
        refreshing: false,
      };
      this.listRef = null;
    }
  
    async componentDidMount() {
      this.props.onRef(this);
      await this.reload(this.props.recordId, this.props.tabLevel, this.props.tabSequence);
    }
  
    componentWillUnmount() {
      this.props.onRef(null);
    }
  
    //I tried adding componentDidUpdate, but it did not work at all
    componentDidUpdate(prevProps) {
      if (this.props.orderSetByModal !== prevProps.orderSetByModal) {
        this.refresh();
      }
    }
  
    getOrderBy = () =&gt; {
      let orderByClause;
      if (this.props.orderSetByModal) {
        orderByClause = this.props.tabOrderBy;
      } else {
        orderByClause = &quot;organization desc&quot;;
      }
      return orderByClause;
    };
  
    async reload() {
      const currentTab = Windows.getTab(this.props.windowId, this.props.tabSequence, this.props.tabLevel);
      this.setState({ currentTab });
      let response = null;
      const orderBy = this.getOrderBy();
      response = await this.props.entity.api.obtainRange(orderBy);
      this.setState({ records: response.dataList })
    }
  
    refresh = () =&gt; {
      this.setState({ refreshing: true }, () =&gt; {
        this.reload(this.props.recordId, this.props.tabLevel, this.props.tabSequence)
        .then(() =&gt; this.setState({ refreshing: false }));
      });
    };
  
    renderTabItem = ({ item, index }) =&gt; (
      &lt;SwipeableCard
        title={&quot;Card&quot;}      
      /&gt;
    );
  
    render() {
      if (!this.state.currentTab) {
        return null;
      }
      
      return (
        &lt;&gt;
          &lt;FlatList
            ref={(ref) =&gt; (this.listRef = ref)}
            style={{ paddingTop: 8 }}
            refreshing={this.state.refreshing}
            onRefresh={this.refresh}
            data={this.state.records}
            keyExtractor={(item) =&gt; (item.isNew ? &quot;new&quot; : item.id)}
          /&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default Tab;
  
  </code></pre>