title: ReactJS Display API in Component
body: <p>I am new to react. I am using an api in the form of </p>
  
  <pre><code>{
   "category": "dogs",
   "available": [
     {
       "name": "pedro",
       "breed": "chihuahua"
     },
     {
       "name": "roxane"
       "breed": "beagle"
      }
   ]
  },
  {
  "category": "cat",
  "available": [
    {
      "name": "garfield",
      "breed": "tobby"
     }
   ]
  }
  </code></pre>
  
  <p>I want to display ALL the pets available from the same category in name-breed pairs.</p>
  
  <p><strong>Example:</strong> Display all dogs</p>
  
  <p>Pedro</p>
  
  <p>Chihuahua</p>
  
  <p>Roxane</p>
  
  <p>Beagle</p>
  
  <p>but that array is giving me hard times.</p>
  
  <p><strong>Attempt</strong></p>
  
  <p><em>App.jsx</em></p>
  
  <pre><code>        {this.state.data.map((availablePets, i) =&gt; &lt;Content key = {i} data = {Content} /&gt;)}
  </code></pre>
  
  <p><em>Content.jsx</em></p>
  
  <pre><code>{this.props.data.available[WhatDoIPutHere?].name}
  {this.props.data.available[ajsnxnnx].breed}
  </code></pre>
  
  <p><strong>Is there another way to display ALL the available pets from the same category in name-breed pairs?</strong></p>
  
  <p><strong>SOLVED</strong></p>
  
  <pre><code> {this.props.data.faqs.map((QA,i) =&gt; 
              &lt;div key={i}&gt;
              &lt;h4&gt;{this.props.data.category[i].name}&lt;/h4&gt;
              &lt;p&gt;{this.props.data.category[i].breed}&lt;/p&gt;
              &lt;/div&gt;
          )}
  </code></pre>