React-Native - ERROR TypeError: undefined is not a function (near '...object.map...')

Question

I test from itemList up to the reducer and action, it works fine and it delete the item I want to be deleted but I got this error after that. I wonder what I'm doing wrong here. Can anyone help me what should I do?

// ItemList.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { selectAllItems } from '../../../redux/reducer/itemReducer';
import { deleteItem } from '../../../redux/action/ItemAction';
import AppButton from '../../shared/AppButton';

const ItemList = () => {
  const dispatch = useDispatch();

  const itemData = useSelector(selectAllItems);
  function removeHandler(id){
    dispatch(deleteItem(id));
  }

  return (
    <>
      {itemData.map((item) => (
        <View style={styles.itemListContainer} key={item.id}>
          <Text style={styles.textStyle}>{item.id}</Text>
          <Text style={styles.textStyle}>{item.name}</Text>
          <Text style={styles.textStyle}>{item.price}</Text>
          <Text style={styles.textStyle}>{item.availableItem}</Text>
          <View style={styles.operationContainer}>
            <AppButton title="Edit" buttonStyle={buttonStyle.edit} textStyle={buttonStyle.text}/>
            <AppButton title="Remove"  buttonStyle={buttonStyle.remove} textStyle={buttonStyle.text} onPress={() => removeHandler(item.id)}/>
          </View>
        </View>
      ))}
    </>
  )
}

// ItemReducer.js

const itemReducer = (state = initialState, { type, payload } = action) =>{
  switch (type) {
    case ADD_ITEM:
      return { ...state, payload };

    case DELETE_ITEM:
      return { payload };

    default:
      return state;

} }

// itemAction.js

function DELETE_ITEM(filtered){
  return{
    type: 'DELETE_ITEM',
    payload: filtered
  }
}

export function deleteItem(id){
  return function(dispatch, getState){
    const itemData = getState().item;
    const filtered = itemData.filter((item) => item.id !== id);
    dispatch(DELETE_ITEM(filtered));
  }
}

Answer 1

Please check your itemData . Sure that is not an array. For sure, you can write the following:

const data = Array.isArray(itemData)? itemData: []

...

      {data.map((item) => (
        <View style={styles.itemListContainer} key={item.id}>
          <Text style={styles.textStyle}>{item.id}</Text>
          <Text style={styles.textStyle}>{item.name}</Text>
          <Text style={styles.textStyle}>{item.price}</Text>
          <Text style={styles.textStyle}>{item.availableItem}</Text>
          <View style={styles.operationContainer}>
            <AppButton title="Edit" buttonStyle={buttonStyle.edit} textStyle={buttonStyle.text}/>
            <AppButton title="Remove"  buttonStyle={buttonStyle.remove} textStyle={buttonStyle.text} onPress={() => removeHandler(item.id)}/>
          </View>
        </View>
      ))}