Why Can't I index my object in React/Redux? TypeError: Cannot read property '1' of undefined

Question

I am currently working on a personal project where I am attempting to create a meal planner table. I am currently using React/Redux to build my app and management my state respectively. I feel like I'm almost done except for this really strange counter-intuitive step I'm having right now. I am currently attempting to iterate over a global redux tableState object that holds the state for my table. Now since my table and table state is defined as an object with the schema(See below), I can't understand why I can't index each item via tableState[mealtime][index] . I keep getting the error that TypeError: Cannot read property '0' of undefined . I understand this as my object being null, but why? Furthermore, if I do tableState['breakfast'][1] , I actually see in the console the value I expect to receive( 'Select' ). What's going on here? Why is the browser throwing this error when in the console I am able to index the array just as expected?

EDIT: So I just realised that I forgot to add a very important detail(I just found this out), I am getting this state from an API and I am attempting to update it through the useEffect API. If I remove this call from the state object, everything works as expected. However, when I run this piece of code above the renderRows method, I get the error. I assume here I am having an issue because this is an async call and the state is in the process of being updated and that is why it's undefined.

/// Defined in seperate file
const tableInitState: ITableInitState = {
 tableState: {
   breakfast: [
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select'
   ],
   lunch: [
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select'
   ],
   dinner: [
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select',
     'Select'
   ]
 }
};

/// Defined in seperate file
// Where onMount is a dispatch function to retreive a state from the API and set in the the store.
useEffect(() => {
   onMount();
 }, []);

const renderRows = () => {
   console.log(tableState['breakfast'][1]);
   return mealTimes.map((mealTime: string, _) => {
     return (
       <TableRow key={mealTime}>
         <TableCell>{mealTime}</TableCell>
         {daysofWeek.map((value: string, index: number) => {
           console.log(`mealTime is: ${mealTime}, the index is ${index}`);
           const currentMeal = tableState['breakfast'][1];
           return (
             <TableCell size="small" key={value}>
               <MealOptionsList
                 mealtime={mealTime}
                 tableIndex={index}
                 currentMeal={currentMeal}
               />
             </TableCell>
           );
         })}
       </TableRow>
     );
   });
 };```

Answer 1

I think you have created object of arrays. Instead of it you can create Array of Objects. In this way you can iterate each item separately.

const arr = [
      breakfast = {
          'Select',
          'Select',
      },
      lunch = {
          'Select',
          'Select',
      },
      dinner = {
          'Select',
          'Select',
      }
]

Now you map this array and you will get each item separately. Happy coding!!!