0

Tengo un problema al renderizar un objecto anidado en React, cuando hago la consulta de esta manera:

componentDidMount(){
        refOkr.on('value', (snapshot) =>{
            const items = snapshot.val();
            const newState = [];
            for(const item in items){
                newState.push({
                    id: item,
                    nombre: items[item].nombre,
                    descripcion: items[item].descripcion,
                    equipo: items[item].equipo,
                    prioridad: items[item].prioridad,
                    tipo: items[item].tipo,
                    progreso: items[item].progreso,
                    rc: items[item].rc
                });
            }
            this.setState({
                items: newState
            });
    

me guarda los datos del objeto en el estado, pero "rc" es un objeto anidado y no se como renderizarlo, al imprimir el estado en la consola me lo muestra asi:

2: descripcion: "MARS" equipo: "JPL" id: "-LkUHwhEVVy_xORCHHU3" nombre: "NASA" prioridad: "critica" progreso: "100%" rc: -LpY2EQpGnrbzxaW3Wzi: actual: "34" esperado: "56" inicial: "12" inicio: "2019-01-01" nombre: "anidamiento" target: "123" termino: "2019-12-31"

toda la información que esta en "RC" no se como llamarla para renderizarla

asi es como hago la renderizacion de los objetos que no estan anidados

<section>
                    <h2>Consulta OKR</h2>
                    <div className="Wrapper">
                        {this.state.items && this.state.items.map((item, key) => {
                            return(
                                <div>
                                    <div>
                                    <label>{item.nombre}</label>
                                    <label>{item.equipo}</label>
                                    <label>{item.prioridad}</label>
                                    <label>{item.progreso}</label>
                                    
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </section>

pero no se como renderizar la parte anidada que esta en rc, espero puedan ayudarme, gracias de antemano

1 respuesta 1

0

No tuve como probar el código directamente bajo el escenario que tienes pero en teoría deberías hacer algo así

<section>
    <h2>Consulta OKR</h2>
    <div className="Wrapper">
        {this.state.items && this.state.items.map((item, key) => {
            return(
                <div>
                    <div>
                        <label>{item.nombre}</label>
                        <label>{item.equipo}</label>
                        <label>{item.prioridad}</label>
                        <label>{item.progreso}</label>
                        { items[item].rc && Object.keys(items[item].rc).map(i => <label>items[item].rc[i]</label>) }
                    </div>
                </div>
            );
        })}
    </div>
</section>
1
  • Muchas gracias por la ayuda man, no lo hice exactamente así pero igual me diste una idea. Al final lo termine haciendo asi: Object.keys(rcs).map( key => <p>{rcs[key].nombre}</p> )
    – AdanVRuiz
    el 4 oct. 2019 a las 3:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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