コンポーネント内のReactJS表示API

Question

私は反応するのが新しいです。私は名前-品種のペアで同じカテゴリから利用可能なすべてのペットを表示したい

{ 
"category": "dogs", 
"available": [ 
    { 
    "name": "pedro", 
    "breed": "chihuahua" 
    }, 
    { 
    "name": "roxane" 
    "breed": "beagle" 
    } 
] 
}, 
{ 
"category": "cat", 
"available": [ 
    { 
    "name": "garfield", 
    "breed": "tobby" 
    } 
] 
} 

の形でAPIを使用しています。

例：表示すべての犬

ペドロ

チワワ

ロクサーヌ

ビーグル

が、その配列は私につらい時を与えています。

試み

App.jsx

 {this.state.data.map((availablePets, i) => <Content key = {i} data = {Content} />)} 

Content.jsx

{this.props.data.available[WhatDoIPutHere?].name} 
{this.props.data.available[ajsnxnnx].breed} 

同じカテゴリから利用可能なすべてのペットを表示するための別の方法はあります名前でDペア？

はあなたのソリューションは、動的ではありません

{this.props.data.faqs.map((QA,i) => 
      <div key={i}> 
      <h4>{this.props.data.category[i].name}</h4> 
      <p>{this.props.data.category[i].breed}</p> 
      </div> 
     )} 

Answer 1

を解決しました。

これはより良い解決策になります。

{ 
    this.props.data.faqs.map((QA,i) => { 
    const pets = QA.available.map((pets, j) => { 
     return <div key={j} 
      <h4>{pets.breed}</h4> 
      <p>{pets.name}</p> 
     </div> 
    }) 
    return <div key={i}> 
     <h4>{QA.category}</h4> 
     {pets} 
    </div> 
    }) 
}