Question 32991 in React native Question posted in
The official React Native documentation can be found here.

I'm getting "TypeError: Cannot read property 'map' of undefined" – React native

I’m getting "TypeError: Cannot read property ‘map’ of undefined" in my code and I cant figure out what is causing this, could someone please help

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, FlatList, SafeAreaView, TouchableOpacity } from 'react-native';
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const baseUrl = "MY URL";

const Alltrans = () => {

  const [rawtrans, setrawtrans] = useState([]);
  const [groupedData, setGroupedData] = useState([]);
  const [transactions, setTransactions] = useState([]);

  useEffect(() => {
    const request = 4;
    const user_email = AsyncStorage.getItem("user_email");

    user_email.then(email => {
      const data = JSON.stringify({
        request,
        user_email: email
      });

      const config = {
        method: "post",
        url: `${baseUrl}/get_them_transactions`,
        headers: {
          "Content-Type": "application/json"
        },
        data
      };

      console.log("the user email is", email);

      axios(config)
        .then(response => {
          const rsp = JSON.parse(JSON.stringify(response.data));
          console.log("the response data is", rsp);
          try {
            const ty = rsp.response;
            console.log(ty);
            setrawtrans(ty);
          } catch (err) {
            console.log("an error occured");
          }
          console.log("Well this is the data>>>>>>>", rawtrans);
        })
        .catch(error => console.log(error));
    });
  }, []);

  useEffect(() => {
    const groupedbydate = [];
    let currentDate;
    rawtrans.map(item => {
      if (item.date !== currentDate) {
        currentDate = item.date;
        groupedbydate.push({
          type: 'date',
          date: currentDate,
        });
      }
      groupedbydate.push({
        type: 'item',
        name: item.name,
        Intent: item.Intent,
        Amount: item.Amount,
        Date: item.Date,
        trx_ID: item.trx_ID,
      });
    });
    setTransactions(groupedbydate);
  }, [rawtrans]);

  useEffect(() => {
    let modifiedTransactions = transactions.map((transaction) => {
      if (transaction.Intent === "payment" || transaction.Intent === "bill" || transaction.Intent === "General") {
        transaction.Amount = "-" + transaction.Amount;
      } else {
        transaction.Amount = "+" + transaction.Amount;
      }
      return transaction;
    });
    setTransactions(modifiedTransactions);
  }, []);
  return(
    <SafeAreaView>
      <FlatList
            data={transactions}
            scrollEnabled={false}
            renderItem={({ item }) => (
               <TouchableOpacity >
                  <Card card={item} />
               </TouchableOpacity>
            )}
      />
    </SafeAreaView>
  )
};


export default Alltrans;

I was Expecting to organize the data according to date and to add a + or minus to the amount depending on the intent

The array data looks like this

"transactions":[{"trx_ID":"2whT","Date":"2022-07-13 09:42:32","Intent":"payment","Amount":"50","Customer_Id":"[email protected]","Customer_name":" ","Customer_Ref":"","Gate":"New gate","Status":"Completed"},{"trx_ID":"vTvC2","Date":"2022-07-13 10:03:34","Intent":"payment","Amount":"50","Customer_Id":"[email protected]","Customer_name":" ","Customer_Ref":"","Gate":"New gate","Status":"Completed"},{"trx_ID":"l7rJW2v","Date":"2022-07-13 10:12:53","Intent":"payment","Amount":"50","Customer_Id":"[email protected]","Customer_name":" ","Customer_Ref":"","Gate":"New gate","Status":"Completed"},{"trx_ID":"PZj","Date":"2022-08-10 12:12:49","Intent":"payment","Amount":"100","Customer_Id":"[email protected]","Customer_name":" ","Customer_Ref":"","Gate":"New gate","Status":"Completed"},{"trx_ID":"FHdE2","Date":"2022-08-10 12:31:07","Intent":"payment","Amount":"100","Customer_Id":"[email protected]","Customer_name":"Jane Test","Customer_Ref":"","Gate":"New gate","Status":"Completed"},]

Tags:

2

Answers


  1. 0

    Make sure this console result in array []. if this is object then map will give you undefined error because it always loop through Array

      setrawtrans(ty); 
  console.log(ty); // this should be []

    This will help below line add ?. if this this will make it work

     rawtrans?.map(item => {
  if (item.date !== currentDate) {
    currentDate = item.date;
    groupedbydate.push({
      type: 'date',
      date: currentDate,
    });
  }
  groupedbydate.push({
    type: 'item',
    name: item.name,
    Intent: item.Intent,
    Amount: item.Amount,
    Date: item.Date,
    trx_ID: item.trx_ID,
  });
});
    Login or Signup to reply.
  2. 0

    axios add additional property wrap the response

    to access it try:

    ...

try {
    const ty = rsp.response.data
    
    ...

    or using desctructuring:

    ...

axios(config)
    .then(({ data: response }) => {
        ...
    }
...

    And to handle undefined variable while the variable expect to array, try:

    ...

rawtrans?.map(...);

...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search