Display array of "children" according to array of "parents" (JS)

Question

Assuming I have the following JSON, and want to turn this information into HTML components (in my case, I’m using React), what should I do?

 [
      {
        "id": 1,
        "nome": "Pai1",
        "filhos": [
          {
            "id": 1,
            "nome": "Filho1"
          },
          {
            "id": 2,
            "nome": "Filho2"
          }
        ]
      },
      {
        "id": 2,
        "nome":"Pai2"
        "filhos": [
          {
            "id": 3,
            "nome":"Filho1"
          },
          {
            "id": 4,
            "nome":"Filho2"
          },
        ]
      }
    ];

1. The idea is to create Tabs for each PARENT
2. The contents of each Tab will be Cards for each CHILD of the respective PARENT

I tried using a for loop similar to the following:

var renderizar_pais = [];
var renderizar_filhos = [];

    for (var i = 0; i < pais.length; i++) {
     for (var j = 0; j < pais[i].filhos.length; j++) {
   renderizar_filhos.push(
   <div>
      <Card title={pais[i].filhos[j].nome}></Card>
   </div>
   }
       renderizar_pais.push(<Tab title={pais[i].nome}></Tab>)
)
}

Later I "called" the vars "render zar_pais" and "render zar_filhos" within the JSX components that I wanted to render, but the problem is that in doing so, I was inserting ALL children into the components of ALL parents, and not just to which they belong (That’s because I was making the loop for the two of them, one inside the other).

From now on, I thank anyone who has a solution to this problem, because I have tried several ways and I am not able to unlock.

Answer 1

Assemble each Tab with the corresponding Cards into a single React array of components.

const dados = [
  {
    "id": 1,
    "nome": "Pai1",
    "filhos": [
      {
        "id": 1,
        "nome": "Filho1"
      },
      {
        "id": 2,
        "nome": "Filho2"
      }
    ]
  },
  {
    "id": 2,
    "nome":"Pai2",
    "filhos": [
      {
        "id": 3,
        "nome":"Filho3"
      },
      {
        "id": 4,
        "nome":"Filho4"
      },
    ]
  }
];

class Tab extends React.Component {
  render() {
    return <div><h1>{this.props.title}</h1></div>
  }
}

class Card extends React.Component {
  render() {
    return <div><h2>{this.props.title}</h2></div>
  }
}

class App extends React.PureComponent {

  renderFilhos(filhos) {
    return filhos.map(filho => <Card title={filho.nome}></Card>);
  }

  renderTab(pai){
    return <div><Tab title={pai.nome}></Tab>{this.renderFilhos(pai.filhos)}</div>;
  }

  render() {
    return dados.map(pai => this.renderTab(pai));
  }

}

See working here.