title: React Native: this.state of reusable components not expected
body: <p>I'm a newbie of React native and honestly I have just a very basic knowledge of React. I'm developing a sample application in which I make use of <a href="https://facebook.github.io/react/docs/reusable-components.html" rel="nofollow noreferrer">reusable components</a> and <strong>ES6</strong> sintax. </p>
  
  <p>I'am experiencing unexpected results when reusing the same component multiple times in the same Scene (I also make use of Navigator). More precisely I can't understand why differents components (of the same type) are apparently conditions each others states.</p>
  
  <p>I'm posting my code for a better understanding. </p>
  
  <p>This is my main page , in which I make use 2 times of the same custom defined component <strong>&lt; TopCategories /></strong> :</p>
  
  <p><strong><em>HomeScene.js</em></strong></p>
  
  <pre><code>import React from 'react';
  import {View} from 'react-native';
  
  import BaseScene from './BaseScene'
  import SearchSuggest from '../components/SearchSuggest';
  import TopCategories from '../components/TopCategories'
  
  import styles from '../styles'
  
  
  export default class HomeScene extends BaseScene {
    render() {
      return(
        &lt;View style={styles.container}&gt;
          &lt;SearchSuggest
            navigator={this.props.navigator}
          /&gt;
  
          &lt;TopCategories/&gt; //first 
  
          &lt;TopCategories/&gt; //second
  
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>These are the details of the inner components used:</p>
  
  <p><strong><em>TopCategories.js</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    Text,
    View,
    StyleSheet
  } from 'react-native';
  
  import styles from '../styles'
  import utility from '../utility'
  import serverConnector from '../serverConnector'
  import routes from '../routes'
  
  import MenuItemComplex from './MenuItemComplex'
  
  export default class TopCategories extends Component {
  
    constructor(props) {
      super(props);
      this.state = {categories: []};
      this._fetchContent();
    }
  
  
    _updateCategoriesList(rawCategories){
      //store in state.categories array a simplied version of         
      //the contents received from the server
  
      let simplifiedCategories = [];
      for(i=0; i&lt;rawCategories.length; i++){
        var simpleCat = {};
        simpleCat.id = rawCategories[i].uniqueID;
        simpleCat.name = rawCategories[i].name;
        simplifiedCategories.push(simpleCat);
      }
  
      this.setState({categories: simplifiedCategories });
    }
  
    _fetchContent(){
      //fetch content from server in JSON format 
      _topCategories = this;
      serverConnector.call(
        "CATEGORY",
        "FindTopCategories",
        {},
        function(err, json){
          if(err!=null) utility.log("e", err);
          else {
            try{
              _topCategories._updateCategoriesList(json.res.header.body.CatalogGroupView);
            }catch(err){
              utility.log("e", err);
            }
          }
        }
      )
    }
  
    openCategoryScene(id, name){
      //push on Navigator stack the next route with additional data
      let nextRoute = routes.get("categoriesListFirst");
      nextRoute.passProps = {
        categoryId: id,
        categoryName: name
      };
      this.props.navigate(nextRoute)
    }
  
    render(){
      console.log(this.state)
      return (
        &lt;MenuItemComplex key="categories" name="Catalogo" icon="list-b" onItemSelected={this.openCategoryScene.bind(this)} subItems={this.state.categories} /&gt;
      )
    }
  }
  </code></pre>
  
  <p>and finally 
  <strong><em>MenuItemComplex.js</em></strong> </p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, Image, TouchableHighlight, TouchableWithoutFeedback } from 'react-native';
  
  import styles from '../styles'
  
  export default class MenuItemComplex extends Component{
  
    static propTypes = {
      name : React.PropTypes.string.isRequired,
      icon : React.PropTypes.string.isRequired,
      subItems: React.PropTypes.array.isRequired,
      onItemSelected: React.PropTypes.func.isRequired
    };
  
    render(){
      let subItems = [];
      for(i=0; i&lt;this.props.subItems.length; i++){
        let subItem = this.props.subItems[i];
        subItems.push(
          &lt;TouchableHighlight
            key={subItem.id}
            underlayColor={"#d00"}
            activeOpacity={1}
            onPress={() =&gt; this.props.onItemSelected(subItem.id, subItem.name)}
          &gt;
            &lt;View style={styles.menuSubItem}&gt;
              &lt;Text style={[styles.mmText, styles.menuSubItemText]} &gt;
                  {subItem.name}
              &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/TouchableHighlight&gt;
        )
      }
  
      return(
  
        &lt;View&gt;
          &lt;TouchableWithoutFeedback disabled={true}&gt;
            &lt;View style={styles.menuItem}&gt;
              &lt;Image style={styles.menuItemImage} source={{uri: this.props.icon}} /&gt;
              &lt;Text style={[styles.mmTextBold, styles.menuItemText]}&gt;{this.props.name}&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/TouchableWithoutFeedback&gt;
  
          {subItems}
  
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>I can't understand why the state.simplifiedCategories of the first &lt; TopCategories > component used in my HomeScene seems to be an empty array after the second &lt; TopCategories > component has rendered. So far I thought that the two components were completely isolated, with their own "private" state. But in this case seems that this is shared somehow.</p>
  
  <p>Can someone explain what is happening here ? And then how can I fix that ? </p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT 2016/09/05</strong>
  As suggested by user V-SHY I tried to give every component a randomic string as key, but this does not solve the problem. 
  What I find very strange is that I can see only an instance of &lt; TopCategories > in the global window object, the last one. </p>
  
  <p>The screenshot here refers to a test made with</p>
  
  <pre><code> &lt;TopCategories key="tc_first" {...this.props}/&gt;
  
   &lt;TopCategories key="tc_second" {...this.props}/&gt;
  </code></pre>
  
  <p>in the <strong><em>HomeScene.js</em></strong> file </p>
  
  <p><a href="https://i.stack.imgur.com/HzPm9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HzPm9.png" alt="console.log(window) result"></a></p>