Not geting data from return inside firebase database

Question

I am getting data from the firebase but able to it on emulator I tried using consloe which workfine

const Getdata = async () => {
    await firebase.database().ref(`/orders/${user1.uid}`)
    .on("child_added", (snapshot, key) => {
        if(snapshot.key) {
            console.log('key',snapshot.key);
            let grabbedData = snapshot.val().orders;
            grabbedData.map((order, i) => {
                console.log('order',order.id);
                console.log('order',order.avatar);
                console.log('order',order.name);
                console.log('order',order.price);
                console.log('----------------');
            });
        }
        
    });
}
Getdata();

After modifing the above code as below code nothing is showing to the screen

const Getdata = () => {
        let data = firebase.database().ref(`/orders/${user1.uid}`)
            .on("child_added", (snapshot, key) => {
             // something is wrong with this below statememnt I think
                return (
                    <Card>
                        <Text>{snapshot.key}</Text>
                        {
                            snapshot.val().orders.map((order, i) => {
                                return (
                                    <TouchableOpacity  key={i} onPress={() => {
                                    }}>
                                        <Card>
                                            <View style={styles.user}>
                                            <Image
                                                style={styles.image}
                                                resizeMode="cover"
                                                source={{ uri: order.avatar }}
                                            />
                                            <View style={{flexDirection:'column', flex: 1}}>
                                                <Text style={styles.name} h4>{order.name}</Text>
                                                <Card.Divider style={{ marginTop: 25}}/>
                                                <View style={{flexDirection:'row', flex: 1,justifyContent: 'space-between'}}>
                                                <Text style={styles.price}>{order.price}</Text>
                                                </View>
                                            </View>
                                            </View>
                                        </Card>
                                    </TouchableOpacity>
                                );
                            })
                        }
                    </Card>

                )
                    
                
        })
        return data;
    }

and then <Getdata/>

Something I am doing wrong with first return statememnt but dont know what. Edit I am adding a pic how data is organised

Answer 1

Try this way

const [orders, setOrders] = useState([]); // initially empty
const [key, setKey] = useState(undefined); // undefined empty

const Getdata = async () => {
    await firebase.database().ref(`/orders/${user1.uid}`)
    .on("child_added", (snapshot, key) => {
        if(snapshot.key) {
            console.log('key',snapshot.key);
            let grabbedData = snapshot.val().orders;
            setKey(snapshot.key); // set key here
            setOrders(grabbedData); // set orders here to state, it will rerender
        }
        
    });
}

useEffect(() => {
    Getdata();
});


return (
                    <Card>
                        {key && <Text>{snapshot.key}</Text>}
                        {
                            orders.map((order, i) => {
                                return (
                                    <TouchableOpacity  key={i} onPress={() => {
                                    }}>
                                        .........
                                    </TouchableOpacity>
                                );
                            })
                        }
                    </Card>

)