SDK Version: 42.0.3
Platforms : android/ios
Hi,
The problem I’m having is with a table/list component (using react native paper’s DataTable but this also happens with regular react native components like View, Text etc.).
I’m mapping an array to a list, however every time I save my code and the simulator refreshes, the list is rendered again and adds the same list to the end of the existing list.
I have mapped lists before without this happening and can’t figure out what’s different about this one.
I’ve tried it with my dataset and just a single Hi and it gives the same results.
Thanks in advance for any suggestions
My component:
export default StatementScreen = ({ route: { params } }) => {
const { userToken } = useContext(UserContext);
const [selectedProperty, setSelectedProperty] = useState("all properties");
const [paymentData, setPaymentData] = useState([]);
const [ready, setReady] = useState(false);
useEffect(() => {
getAllStatements(userToken)
.then((statements) => {
const { payments } = statements;
for (const [key, value] of Object.entries(payments)) {
paymentData.push(value);
}
return setPaymentData(paymentData);
})
.then(() => {
if (params) {
setSelectedProperty(params.unit.name);
}
setReady(true);
})
.catch((err) => {
console.log(err);
});
}, []);
const onPress = (payment) => {
console.log(payment);
};
return (
<SafeWitHeaderContentView>
<DefaultHeader />
<NestedStackHeader title="My statements" />
{ready ? (
<DefaultContainer>
<View style={styles.sectionHeader}>
<FontText style={{ color: colors.textOnLightAccent }}>
Showing statement for {selectedProperty}
</FontText>
</View>
{/* table header */}
<DataTable style={styles.table}>
<DataTable.Header>
<DataTable.Title>
<FontText>Date</FontText>
</DataTable.Title>
<DataTable.Title numeric>
<FontText>Balance</FontText>
</DataTable.Title>
<DataTable.Title numeric>
<FontText>Transaction</FontText>
</DataTable.Title>
</DataTable.Header>
{/* table body */}
{paymentData.map((payment, index) => {
let transaction = "";
const received = parseFloat(payment.received);
const charged = parseFloat(payment.charged);
if (received > 0) {
transaction = (
<FontText style={{ color: "green" }}>
+{received.toFixed(2)}
</FontText>
);
} else if (charged > 0) {
transaction = <FontText>-{charged.toFixed(2)}</FontText>;
} else if (charged < 0) {
transaction = <FontText>{charged.toFixed(2)}</FontText>;
}
const balance = payment.balance;
return (
<Pressable
onPress={() => {
onPress(payment);
}}
key={index}
>
<DataTable.Row>
<DataTable.Cell>{formatDate(payment.date)}</DataTable.Cell>
<DataTable.Cell numeric>
{balance.toFixed(2)}
</DataTable.Cell>
<DataTable.Cell numeric>{transaction}</DataTable.Cell>
</DataTable.Row>
</Pressable>
);
})}
<FontText style={{ color: colors.darkGrey, padding: 10 }}>
Select a transaction to view details
</FontText>
</DataTable>
<View style={styles.datePickerContainer}>
<View style={styles.datePickerHeader}>
<FontText style={{ color: colors.textOnLightAccent }}>
Select a date range
</FontText>
</View>
</View>
<View style={{ height: 200 }}></View>
</DefaultContainer>
) : (
<Loading content={"statements"} />
)}
</SafeWitHeaderContentView>
);
};