title: React Native Child Component update
body: <p>I'm trying to update the child component (that represents a listItem) when the user clicks on a Swipable button, in order to set it to "read". In my parent component "NotificationList.js" the data is being updated successfully and when I "console.log()" the data is updated. However, I want to change the ListItem background color, in spite of this state (read/not read). Internally on the child component, the update is working fine, but when I try to update it based on the parent component that data changes are not re-rendering on the child component.</p>
  
  <p>I already tried to use "setState", "componentDidMount" and "componentWillReceiveProps". Probably one of this one should solve my question, but I might not have applied them correctly.</p>
  
  <p>In summary, my problem is related to how to update a Child component listItem when I update my data object on the parent side?</p>
  
  <p>Can someone give me some tips on how can I solve this situation?</p>
  
  <p>I send some of my code bellows. Let me know if you might need for information on the current problem.</p>
  
  <p>Any help with this would be greatly appreciated!</p>
  
  <p><strong>NotificationsList.js</strong></p>
  
  <pre><code>export default class NotificationsList extends Component {
      constructor(props) {
          super(props);
          this.state = {
                  listViewData: this.props.datainfo,
          };
      }
  
     [.....]
  
  render() {
      return (
      &lt;View style={styles.container}&gt;
                  &lt;SwipeListView
                      useFlatList
                      data={this.state.listViewData}
                      renderItem={ (data, rowMap) =&gt; (
                          &lt;SwipeRow&gt;
                              &lt;View style={styles.rowBack}&gt;
                              &lt;TouchableOpacity onPress={ _ =&gt; {
                                  this.updateReadState(data.item.key, rowMap);
                                  }}&gt;
                                  &lt;Text style={styles.backTextBlack}&gt;{data.item.read == true ? "Unread" : "Read"}&lt;/Text&gt;
                              &lt;/TouchableOpacity&gt;
                          &lt;/View&gt;
  
                              &lt;NotificationsRow 
                                  data={data.item}
                              /&gt;
                          &lt;/SwipeRow&gt;
                      )}
                  /&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>NotificationsRow.js</strong></p>
  
  <pre><code>export default class NotificationsRow extends Component {
      constructor(props) {
          super(props);
          this.state = {
              datarow: this.props.data,
          };
      }
  
  render() {
      return (
          &lt;View style={styles.container}&gt;             
                      &lt;View style={{ backgroundColor: this.state.datarow.read == true ? '#FFFFFF' : '#dddddd', }}&gt;
  
                          &lt;View style={ styles.listText }&gt;                            
                              &lt;View&gt;
                                  &lt;Text style={ styles.messageText }&gt; { this.state.datarow.message } &lt;/Text&gt;
                                  &lt;TouchableWithoutFeedback onPress={ () =&gt; {
                                      this.state.rowReadState = !this.state.rowReadState;
                                  }}&gt;
                                      &lt;Image source={ this.state.datarow.read == true ? require('../images/readed.png') : require('../images/unread.png') } /&gt;
                                  &lt;/TouchableWithoutFeedback&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>