Error: Objects are not valid as a React child (found: object with keys {$numberDecimal})

Question

I am getting this as response

Error: Objects are not valid as a React child (found: object with keys {$numberDecimal}). If you meant to render a collection of children, use an array instead. This is a react native Error.

This is the error i am getting

However when i call it from Postman this is what i am getting as reponse.

[
    {
        "_id": "63a17fb9c3ab4fb0791e8fed",
        "email": "john_kross2@yopmail.com",
        "narration": "test transfer",
        "credit": {
            "$numberDecimal": "0"
        },
        "debit": {
            "$numberDecimal": "700000.25"
        },
        "amount": {
            "$numberDecimal": "700000.25"
        },
        "created_at": "2022-12-20T09:26:06.030Z",
        "__v": 0
    },
    {
        "_id": "63a21c233b6777ba42d0f0de",
        "email": "john_kross2@yopmail.com",
        "narration": "test transfer",
        "credit": {
            "$numberDecimal": "0"
        },
        "debit": {
            "$numberDecimal": "700000.25"
        },
        "amount": {
            "$numberDecimal": "700000.25"
        },
        "created_at": "2022-12-20T20:05:19.080Z",
        "__v": 0
    },
    {
        "_id": "63a285dac39b723f84ee01eb",
        "email": "john_kross2@yopmail.com",
        "narration": "test transfer",
        "credit": {
            "$numberDecimal": "0"
        },
        "debit": {
            "$numberDecimal": "700000.25"
        },
        "amount": {
            "$numberDecimal": "700000.25"
        },
        "created_at": "2022-12-21T03:52:50.347Z",
        "__v": 0
    },
    {
        "_id": "63a28607c39b723f84ee01ee",
        "email": "john_kross2@yopmail.com",
        "narration": "test transfer",
        "credit": {
            "$numberDecimal": "0"
        },
        "debit": {
            "$numberDecimal": "700000.25"
        },
        "amount": {
            "$numberDecimal": "700000.25"
        },
        "created_at": "2022-12-21T03:52:50.347Z",
        "__v": 0
    },
    {
        "_id": "63a28633c39b723f84ee01f0",
        "email": "john_kross2@yopmail.com",
        "narration": "test transfer",
        "credit": {
            "$numberDecimal": "0"
        },
        "debit": {
            "$numberDecimal": "700000.25"
        },
        "amount": {
            "$numberDecimal": "700000.25"
        },
        "created_at": "2022-12-21T03:52:50.347Z",
        "__v": 0
    }
]

How do i get to put the amount inside the flatlist and align it properly.

My code is looking thus

import React, {useEffect, useState} from 'react';
import {
  ActivityIndicator,
  Button,
  Image,
  ImageBackground,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {Header, Avatar, Icon, Card} from '@rneui/themed';
import {FlatList, ScrollView} from 'react-native-gesture-handler';
import {useNavigation} from '@react-navigation/native';
import {Tab} from '@rneui/base';
import AsyncStorage from '@react-native-async-storage/async-storage';

const HomePage = () => {
  const [transaction_details, setTransaction_details] = useState([]);
  const [isLoading, setLoading] = useState(true);

  const navigation = useNavigation();

  const Item = ({title}) => (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );

  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: 350,
          backgroundColor: '#D3D3D3',
        }}
      />
    );
  };

  showdata = async () => {
    let token = await AsyncStorage.getItem('token');
    alert(token);
  };

  getTransactionsList = async () => {
    let token = await AsyncStorage.getItem('token');
    let email = await AsyncStorage.getItem('email');

    fetch('https://webserver-migospay.onrender.com/api/user-data/get-transactionby-email/' + email, {
      method: 'GET',
      headers: {
        'Content-type': 'application/json',
        'Authorization': `Bearer ${token}`,
      },
    })
      .then(response => response.json())
      .then(responseJson => {
        setTransaction_details(responseJson);
        setLoading(false);
      });
  };

  useEffect(() => {
    //showdata();
    getTransactionsList();
  });

  /*useEffect(() => {
    fetch('https://brotherlike-navies.000webhostapp.com/people/people.php', {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-type': 'application/json',
      },
    })
      .then(response => response.json())
      .then(responseJson => {
        setTransaction_details(responseJson);
        setLoading(false);
      });
  }, []);
  */

  return (
    <View style={{flex: 1}}>
      <Header
        containerStyle={{
          backgroundColor: 'transparent',
          justifyContent: 'space-around',
        }}
        leftComponent={
          <Avatar
            small
            rounded
            source={{
              uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiRne6FGeaSVKarmINpum5kCuJ-pwRiA9ZT6D4_TTnUVACpNbzwJKBMNdiicFDChdFuYA&usqp=CAU',
            }}
            onPress={() => console.log('Left Clicked!')}
            activeOpacity={0.7}
          />
        }
        rightComponent={
          <Icon
            name={'mail-outline'}
            color={'#00BB23'}
            size={32}
            onPress={() => navigation.navigate('Accounts')}
          />
        }></Header>

      <ImageBackground
        source={{
          uri: 'asset:/logo/bg.JPG',
        }}
        imageStyle={{borderRadius: 6}}
        style={{
          top: 15,
          paddingTop: 95,
          alignSelf: 'center',
          width: 328,
          height: 145,
          borderadius: 9,
          justifyContent: 'center',
          alignSelf: 'center',
          alignItems: 'center',
        }}>
        <View>
          <Text style={styles.accText}>Wallet Balance</Text>
          <Text style={styles.text}> 250,000 </Text>
        </View>
      </ImageBackground>
      <View>
        <Text
          style={{
            fontFamily: 'Poppins-Bold',
            flexDirection: 'row',
            paddingTop: 55,
            fontSize: 15,
            left: 18,
            color: 'gray',
          }}>
          Recent Transactions
        </Text>
      </View>
      <View style={{flex: 1, marginTop: 35}}>
        {isLoading ? (
          <ActivityIndicator />
        ) : (
<FlatList
    data={transaction_details}
    ItemSeparatorComponent={this.FlatListItemSeparator}
    renderItem={({ item }) => {
      return (
        <View>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
            <Text>{item.narration}</Text>
            <Text>{item.amount}</Text>
          </View>
          <Text>{item.date}</Text>
        </View>
      )
    }}
    keyExtractor={(item) => item._id.toString()}
 />
        )}
      </View>
    </View>
  );
};

export default HomePage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },

  paragraph: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    padding: 20,
  },
  text: {
    top: -85,
    fontSize: 30,
    color: 'white',
    textAlign: 'center',
    fontFamily: 'Poppins-Bold',
  },
  mainContainer: {
    paddingTop: 90,
    justifyContent: 'center',
    alignItems: 'center',
  },
  accText: {
    top: -85,
    paddingTop: 10,
    justifyContent: 'center',
    alignItems: 'center',
    fontFamily: 'Poppins-Medium',
    color: 'white',
    textAlign: 'center',
  },
  PayeeName: {
    justifyContent: 'flex-start',
    flexWrap :'wrap',
    fontFamily: 'Poppins-Medium',
    size: 800,
    fontWeight: 'bold',
  },
  amountValue: {
    textAlign:'right',
    fontFamily: 'Poppins-Medium',
    size: 800,
    fontWeight: 'bold',
  },
});

I need help. pls

Edit

It is returning the data now, however i want the date to be like this 2022-12-20 and not how it is the other way round.

Answer 1

I think your problem is here:

ItemSeparatorComponent={this.FlatListItemSeparator}

this.FlatListItemSeparator returns undefined instead of React component, fix it with:

ItemSeparatorComponent={FlatListItemSeparator}