There are two different arrays in the database, but it prints the information in duplicate when displaying it. I have put the screenshots of the database, screen and output below
At the top, I will have only 1 graph and the information from Top3Data in this database will be, and at the bottom, the information I named data will come.
My problem is that the data I pull from the database comes in twos.
import React, { Component} from 'react';
import
{ View,
Text,
SafeAreaView,
StyleSheet,
Dimensions ,
} from 'react-native';
import {
ProgressChart,
} from "react-native-chart-kit";
import PagerView from 'react-native-pager-view';
import auth, { firebase } from '@react-native-firebase/auth';
import database from '@react-native-firebase/database';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
style={
marginVertical: 8,
borderRadius: 16
};
export default class level extends Component {
constructor(props) {
super(props);
this.state = {
list:[],
};
}
componentDidMount(){
const user = firebase.auth().currentUser.uid;
const db = firebase.database();
const ref = db.ref('LevelData/'+`${user}`);
ref.on('value',(snapshot)=>{
var li=[];
snapshot.forEach((child) => {
li.push({
key:child.key,
data:snapshot.val().data,
Top3Data:snapshot.val().Top3Data,
//Top3Data:snapshot
//Top3Data:child.val().Top3Data,
})
}
)
this.setState({list:li})
console.log(li)
})
}
renderLevel(){
var lis=[]
lis=this.state.list
return lis.map((key) =>
<View style={styles.botChartsView} >
<ProgressChart
data={key.data}
width={120}
height={180}
strokeWidth={16}
radius={32}
hideLegend={false}
strokeWidth={20}
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
backgroundGradientTo: "#ffa726",
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
},
propsForDots: {
r: "6",
strokeWidth: "2",
stroke: "#ffa726"
}
}}
/></View>);
}
renderLevel1(){
var lis=[]
lis=this.state.list
return lis.map((key) =>
<ProgressChart
data={key.Top3Data}
width={320}
height={200}
strokeWidth={16}
radius={32}
hideLegend={false}
strokeWidth={20}
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
backgroundGradientTo: "#ffa726",
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
},
propsForDots: {
r: "6",
strokeWidth: "2",
stroke: "#ffa726"
}
}}
/>);
}
render() {
return (
<SafeAreaView style={styles.container}>
<View style={styles.topChart}>
<View style={styles.topThird}>
<Text style={styles.topThirdtext}>EN İYİ 3</Text>
</View>
{this.renderLevel1()}
</View>
<PagerView style={styles.botChart} initialPage={0}>
<View style={{flexDirection:'row'}} key='0'>
{this.renderLevel()}
</View>
</PagerView>
</SafeAreaView>
);
}
}
This firebase database
This console output
This app screen enter image description here
