title: React native react sub array in object
body: <p>I am tired print out sub array data form an object in render()..</p>
  
  <p>data object JSON:</p>
  
  <pre><code>{
  "genres": [
      {
          "id": 27,
          "name": "aa"
      },
      {
          "id": 878,
          "name": "bb"
      },
      {
          "id": 28,
          "name": "cc"
      },
      {
          "id": 53,
          "name": "dd"
      }
  ], 
  "status": "Released",
  "tagline": ""
  }
  </code></pre>
  
  <p>MyMainScreen.js</p>
  
  <pre><code>render() {
      return (
          &lt;Container&gt;
              &lt;Content style={{marginLeft:0,marginRight:0}}&gt;
                  &lt;InfoSection key={this.state.data.id} info={this.state.data}/&gt;
              &lt;/Content&gt;
          &lt;/Container&gt;
      );}
  </code></pre>
  
  <p>InfoSection .js</p>
  
  <pre><code>const InfoSectionCard = ({ info }) =&gt; (
  &lt;View&gt;
      &lt;Text style={styles.cardGenreItem}&gt;{info.genres}&lt;/Text&gt;
  &lt;/View&gt;
  );
  export default InfoSectionCard;
  </code></pre>
  
  <p>I was using <code>.map</code> to solve this.. not it does work usually.
  It works print out all JSON object when using<code>JSON.stringify(obj)
  </code></p>
  
  <p>When I try</p>
  
  <p><code>&lt;Text style={styles.cardGenreItem}&gt;{info.genres}&lt;/Text&gt;</code></p>
  
  <p>the react error message are Invariant Violation: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.</p>
  
  <p>But then add the '.map'</p>
  
  <p><code>info.genres.map(item =&gt;&lt;Text style={styles.cardGenreItem}&gt;{item.name}&lt;/Text&gt;)</code></p>
  
  <p>the react error message are TypeError: undefined is not an object(evaluating 'info.genres.map')</p>