Access a list within a list in React jsx

Question

Hello, I’m a newcomer to React and am making a request via Xios. This request returns me the following JSON:

after receiving this list I make a .map on the list and it returns me the following:

What I want is to get the lista_area_negocio and the lista_depto. But I don’t know how.

These are some excerpts from my code:

  componentDidMount() {
axios.get(API_ListaEmpresa)
  .then(response => {
    this.setState({ listaEmpresa: response.data });
  })
  .catch(error => {
    console.log(error);
  })

Here I make the list of companies, this gets right the problem is to get the list of departments and business area.

{/* Empresa */}
          <div className="input-group mb-3">
            <div className="input-group-prepend">
              <label className="input-group-text" htmlFor="empresa">Empresa: </label>
            </div>
            <select value={this.state.company} className="form-control" id="empresa" required="required" onChange={this.handleCompanyChange}>
              <option value={0} >Escolha...</option>
              {this.state.listaEmpresa.map(function (empresa) {
                return (<option key={empresa.ax_cod_empresa} value={empresa.ax_cod_empresa}>{empresa.ax_desc_empresa}</option>);
              })
              }
            </select>
          </div>
              {
              console.log(this.state.listaEmpresa)
              }

That would be the list of departments I can’t get.

{/* Departamento */}
          <div className="input-group mb-3">
            <div className="input-group-prepend">
              <label className="input-group-text" htmlFor="departamento">Departamento: </label>
            </div>
            {
              this.state.company !== 0
                ? <select className="form-control" id="departamento" required="required" onChange={this.handleDepartmentChange}>
                  <option value={0}>Escolha...</option>
                  {this.state.listaEmpresa.map(function (departamento) {
                    return (console.log(departamento), <option key={departamento.lista_depto.ax_cod_dept} value={departamento.lista_depto.ax_cod_dept}>{departamento.lista_depto.ax_desc_dept}</option>);
                  })
                  }
                </select>
                : <select className="form-control" id="departamento" required="required" disabled><option value={0}>Selecione uma empresa</option></select>
            }
          </div>

How do I separate the list of departments and business area? I also want to be able to get the data from lista_depto and lista_area_negocio.

Obs. lista_depto and lista_area_negocio depend on the company list, ie I can only show the user to lista_depto and lista_area_negocio corresponding to the company he requested.

Answer 1

Gabriel you need to make a map inside another just that, you’re already with the data in hand just go ! I created a list for you to see how simple it is !!

var lista = [{

"ax_cnpj" :223132123,
"lista_departamento":[{
    "ax_desc_dept": "Pesquisa e Desenvolvimento"


}]

}];

------------------------------------- Here accessing the list --------------------

lista.map(
(lista) => {
    lista.lista_departamento.map(
    (departamento) => console.log(departamento.ax_desc_dept)
    )
})