1

Tengo una duda: estoy tratando de mapear un arreglo. El arreglo es mas o menos asi:

politicas : 
[ 0 : {descripcion: "prueba", id :1}, 
  1:  [
       0:{descripcion: "prueba2", id:2},
       1:{descripcion:"prueba3", id :3}
]

Lo estoy tratando de mapear de la siguiente forma:

<ul>
  {(() => {
    return this.state.termsandconditions.map((object, keyObject) => {
      return <li key={keyObject}>{object.description}</li>;
    });
  })()}
  <ol>
    {(() => {
      return this.state.termsandconditions.map((object, keyObject) => {
        if (object[keyObject] == '') {
          return <li key={keyObject}>{object.description}</li>;
        }
      });
    })()}
  </ol>
</ul>

la primera parte la puedo mapear bien pero en el array hay dentro otro array que no se bien como mapearlo

mi codigo me muestra la primera descripcion y la segunda y tercer descripcion ya no la muestra

Quedo atento a sus comentarios y muchas gracias de antemano

1 respuesta 1

0

Espero haber entendido bien, pero creo que necesitas algo como esto:

class TuComponente extends React.Component {
  state = {
    politicas: [
      { descripcion: 'prueba', id: 1 },
      [
        { descripcion: 'prueba2', id: 2 },
        { descripcion: 'prueba3', id: 3 },
      ],
    ],
  };

  renderPolitica = (politica) => {
    return <li key={politica.id}>{politica.descripcion}</li>;
  };

  renderPoliticas = (politicas) => {
    return politicas.map((politica) => {
      if (politica instanceof Array) {
        return <ol>{politica.map(this.renderPolitica)}</ol>;
      } else {
        return this.renderPolitica(politica);
      }
    });
  };

  render() {
    const { politicas } = this.state;
    return <ul>{this.renderPoliticas(politicas)}</ul>;
  }
}

ReactDOM.render(<TuComponente />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.