title: Unable to read map property of an array
body: <p>I am trying to fix this but couldn't get it fixed. I have tried many solutions but cannot fix this issue. </p>
  
  <pre><code>import React, { useContext } from 'react';
  import { Transaction } from './Transaction';
  
  import { GlobalContext } from '../context/GlobalState';
  
  export const TransactionList = () =&gt; {
    const { transactions } = useContext(GlobalContext);
  
    return (
      &lt;&gt;
        &lt;h3&gt;History&lt;/h3&gt;
        &lt;ul className="list"&gt;
          {transactions.map(transaction =&gt; (&lt;Transaction key={transaction.id} transaction={transaction} /&gt;))}
        &lt;/ul&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  
  <p>and the GobalState.js file in context folder is: </p>
  
  <pre><code>import React, { createContext, useReducer } from 'react';
  import AppReducer from './AppReducer'
  const initialState = {
      transactions: [
          { id: 1, text: 'Flower', amount: -20 },
          { id: 2, text: 'Salary', amount: 300 },
          { id: 3, text: 'Book', amount: -10 },
          { id: 4, text: 'Camera', amount: 150 }
      ]
  }
  
  export const GlobalContext = createContext(initialState);
  
  export const GlobalProvider = ({ children }) =&gt; {
      const [state, dispatch] = useReducer(AppReducer, initialState);
  
      return (&lt;GlobalContext.Provider value={{
          transaction: state.transactions
      }}&gt;
          {children}
      &lt;/GlobalContext.Provider&gt;)
  }
  </code></pre>