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

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.