title: TypeError: Cannot read property 'alerts' of undefined
body: <p>I am trying to read alerts property of alertContext when I get:</p>
  
  <pre><code>TypeError: Cannot read property 'alerts' of undefined
  Alerts
  D:/connection/client/src/layouts/Alerts.js:6
    3 | 
    4 | const Alerts = () =&gt; {
    5 |   const alertContext = useContext(AlertContext);
  &gt; 6 |   return (
    7 |     alertContext.alerts.length &gt; 0 &amp;&amp;
    8 |     alertContext.alerts.map(alert =&gt; (
    9 |       &lt;div key={alert.id} className={`alert alert-${alert.type}`}&gt;
  </code></pre>
  
  <p>My <strong>Alerts.js</strong> file having the issue is:</p>
  
  <pre><code>import React, { useContext } from "react";
  import AlertContext from "../context/alert/alertContext";
  
  const Alerts = () =&gt; {
    const alertContext = useContext(AlertContext);
    return (
      alertContext.alerts.length &gt; 0 &amp;&amp;
      alertContext.alerts.map(alert =&gt; (
        &lt;div key={alert.id} className={`alert alert-${alert.type}`}&gt;
          &lt;i className='fas fa-info-circle' /&gt;
          {alert.msg}
        &lt;/div&gt;
      ))
    );
  };
  
  export default Alerts;
  </code></pre>
  
  <p>I have been trying to use the HOOKS and context api to manage states and other lifecycle stuff.</p>
  
  <p>all the files relevant to the code are put in a directory called 'alert' under 'context'.</p>
  
  <p>Here are the other files:
  <strong>alertContext.js</strong></p>
  
  <pre><code>import { createContext } from "react";
  
  const alertContext = createContext();
  export default alertContext;
  </code></pre>
  
  <p><strong>AlertState.js</strong></p>
  
  <pre><code> import React, { useReducer } from "react";
      import uuid from "uuid";
  
      import AlertContext from "./alertContext.js";
      import alertReducer from "./alertReducer.js";
  
      import { SET_ALERT, REMOVE_ALERT } from "../types.js";
  
      const AlertState = props =&gt; {
        const initialState = [];
  
        const [state, dispatch] = useReducer(alertReducer, initialState);
  
        // SetAlert
        const setAlert = (msg, type, timeout = 5000) =&gt; {
          const id = uuid.v4();
          dispatch({
            type: SET_ALERT,
            payload: { msg, type, id }
          });
  
          setTimeout(() =&gt; dispatch({ type: REMOVE_ALERT, payload: id }), 5000);
        };
  
        return (
          &lt;AlertContext.Provider
            value={{
              // Initial State
              alerts: state,
              setAlert
            }}
          &gt;
            {props.children}
          &lt;/AlertContext.Provider&gt;
        );
      };
  
      export default AlertState;
  
  
  
  **alertReducer.js**
  
      import { SET_ALERT, REMOVE_ALERT } from "../types.js";
  
      export default (state, action) =&gt; {
        switch (action.type) {
          case SET_ALERT: {
            return [...state, action.payload];
          }
          case REMOVE_ALERT: {
            return state.filter(alert =&gt; alert.id !== action.payload);
          }
          default:
            return state;
        }
      };
  </code></pre>