Блог

Я новичок в react. Я использую api в виде

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

Я хочу отобразить ВСЕХ домашних животных, доступных из одной категории, в парах имя-порода.

Пример: отобразить всех собак

Педро

Чихуахуа

Роксана

Beagle

но этот массив вызывает у меня трудности.

Попытка

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}
 

Есть ли другой способ отобразить ВСЕХ доступных домашних животных из одной категории в парах имя-порода?

РЕШАЕМАЯ

  {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>
        )}
 

Ваше решение не является динамическим.

Это будет лучшим решением.

 {
  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>
  })
}