props data is not working in componentDidMount using react-native
<p>I have been struggling for the last 24 hrs about this one.
The problem is that, I am passing props in my parent class and calling the props data in my child component. When I check in render method the data shows correctly, but when calling it in <code>componentDidMount</code> it shows null.</p>

<p><strong>Here is the sample of my code</strong></p>

<pre><code>class parent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      isOpen: false,
      day:'monday',
      data:[],
      data1:[]
    }
  }

  back () {
    this.props.navigator.pop();
  }

  Mon(){
    var record=[];
    this.state.data.map((data) =&gt; {
      if(data.frequency[0].day == 'Monday'){
        record.push(data);
      }
    });
    this.setState({data1:record});
  }

  componentWillMount() {
    this.fetchData();
  }

  fetchData() {
  //here i am getting the data from service and set the data to the state
  }

  render(){
    return(
      &lt;View style={styles.Maincontainer}&gt;
        &lt;View style={styles.navbar}&gt;
          &lt;View style={styles.navbarContainer}&gt;
            &lt;View style={styles.navbarIcon}&gt;
              &lt;TouchableOpacity style={styles.button} onPress={() =&gt; this.back()}&gt;
                &lt;Image
                  style={styles.menu2}
                  source={require('image!nav_arrow')} /&gt;
                &lt;Text style={styles.navbuttonText}&gt;Back&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
            &lt;View style={styles.navbarText}&gt;
              &lt;Text style={styles.title}&gt;Title&lt;/Text&gt;
            &lt;/View&gt;
            &lt;View style={styles.navbarButton}&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
        &lt;View style={styles.subMainContainer}&gt;
          &lt;View style={styles.weekHeader}&gt;
            &lt;View style={styles.weekRow}&gt;
              &lt;Text style={styles.text} onPress={this.Mon.bind(this)}&gt;Mon&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
          &lt;View style={styles.listBody}&gt;
            {this.state.data1.length == 0 ?(
              &lt;List data={this.state.data} /&gt;
            ) : (
              &lt;List data={this.state.data1}/&gt;
            )}
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
}
</code></pre>

<p>In my child component, I want to display the data in a <code>ListView</code> which is taken from the parent component </p>

<pre><code>class List extends React.Component{
   constructor(props){
    super(props);
    this.state = {
       dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) =&gt; row1 !== row2
       }),
       isLoading: true
    };
  }
 componentDidMount(){ //**here props data shows empty**
    alert("didMount:"+JSON.stringify(this.props.data));
    var data=this.props.data
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(data),
      isLoading: false
    });
  }
  render() { //**In this alert it shows correct data**
    alert("data:"+JSON.stringify(this.props.data));
   if (this.state.isLoading) {
      return this.renderLoadingView();
    }
    return(
      &lt;ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderSchedule.bind(this)}
        automaticallyAdjustContentInsets={false}/&gt;
      );
  }
  renderLoadingView(){
    return(
       &lt;View style={styles.loading}&gt;
       &lt;ActivityIndicatorIOS
                size='large'/&gt;
        &lt;Text&gt;
          Loading Schedule...
        &lt;/Text&gt;
      &lt;/View&gt;
      );
  }
  renderSchedule(data){
    return(
      &lt;View style={styles.ListContainer}&gt;
          &lt;View style={styles.subContainer}&gt;
            &lt;Text style={styles.classText}&gt;Class Name: {data.name}&lt;/Text&gt;
             {data.frequency[0].day == null ? (
              &lt;Text style={styles.Day}&gt;Day: {data.frequency[0].date}&lt;/Text&gt;
              ):
            &lt;Text style={styles.Day}&gt;Day: {data.frequency[0].day}&lt;/Text&gt;
          }
          &lt;/View&gt;
          &lt;View style={styles.subContainer1}&gt;
            &lt;Text style={styles.startTime}&gt;Start: {data.frequency[0].from}&lt;/Text&gt;
            &lt;Text style={styles.endTime}&gt;End: {data.frequency[0].to}&lt;/Text&gt;
          &lt;/View&gt;
      &lt;/View&gt;
      )
  }
}
</code></pre>

<p>Here what i want is that initially i need to display the total data,when click on the text parent class the data need to be changed.I want to show the data in ListView.I already explain above about my problem,So can any one give me suggestions that how to solve my problem, Any help much appreciated</p>