How to await setting to state before mapping array?

'm trying to map some data that I have stored in an array (the screenshot below), but I can't seem to access it, because it is loaded asynchronously. How could I await the data? Is there a way to do it in the render function?

 render() {        return (          {this.state.serials.map((number) => {    return number.s && number.s.length?     (<h2 > {number.s[0].a}</h2>  ) : null})}        )    }

This is componentDidMount() where I get my data:

componentDidMount()         const uid = this.state.user.uid;        const gatewayRef = db.ref(uid +'/gateways');        gatewayRef.on('value', (gateways_nums) => {            const serialsArr = [];          gateways_nums.forEach((gateway_num) => {            const serialRef = db.ref('gateways/'+ gateway_num.val()['gateway'])            const last_temps =[];            serialRef.on('value', (serials)=>{                 const ser = []                serials.forEach((serial)=>{                    ser.push(serial.val()['serial'])                })                last_temps.push({a: gateway_num.val()['gateway'], b: ser})            })            serialsArr.push({s:last_temps})          });          this.setState({serials:serialsArr})        });      }

I would really appreciate any help!