Not able to access react state using Context API

Question

I am trying to add alert component to my notebook App so when user logins and make any changes he gets alert at the top, To execute this I used context API, but when I am trying to access the state object to Alert component from AlertContext file, I get this below error

alert.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'type')

Here is my Alert and AlertContext files

import React from "react"; 
import { useContext } from "react"; 
import { AlertContext } from "../context/notes/AlertContext";
    
export const Alert = (props) => { 
const { alerts } = useContext(AlertContext);
return (
        <div>
          <div
            className={`alert alert-${alerts.type}  alert-dismissible fade show`}
            role="alert"
            role="alert"
          >
            {alerts.message}
          </div>
        </div>   
      ); 
};

import React, { useState } from 'react'
import { AlertContext } from './AlertContext'


const AlertState = (props) => {

  const [alerts, setAlerts] = useState({ message: null, type: null });

  const setMsg = (msg,type) =>
  {
    setAlerts({ message: msg, type: type });
    setTimeout(() =>
    {
      setAlerts({ message: null, type: null })
    },1500);
  }
  return (
      <AlertContext.Provider  value={setMsg , alerts}>
          {props.children}
      </AlertContext.Provider>
  );
}

export default AlertState

Are you wrapping the Alert component within your provider, in this case the AlertState component? — Kapobajza
– Kapobajza, Commented Feb 27, 2022 at 10:15
And it seems like you're missing brackets on this line: <AlertContext.Provider value={setMsg , alerts}>, it's supposed to be <AlertContext.Provider value={{setMsg , alerts}}> — Kapobajza
– Kapobajza, Commented Feb 27, 2022 at 10:16
In order for your component (in your case the Alert component) to be able to use React context, it has to have the Provider as its parent (in your case AlertContext.Provider, or more specifically your AlertState component). I mean do you have something like this in your component hierarchy: <AlertState><Alert /></AlertState>? — Kapobajza
– Kapobajza, Commented Feb 27, 2022 at 10:22
Yes, I have this one, otherwise I would have got some different error. — Sushanth
– Sushanth, Commented Feb 27, 2022 at 10:25

Vida Hedayati · Accepted Answer · 2022-02-27 10:17:59Z

2

Try it

<AlertContext.Provider value={{setMsg,alerts}}>
         {props.children}
     </AlertContext.Provider>

answered Feb 27, 2022 at 10:17

Vida Hedayati

3361 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user22340374 · Accepted Answer · 2023-08-04 18:23:39Z

0

Add the following check in your Alert component beacuse initially the 'alerts' object is going to be null. That's why it is giving this error. Adding this check will resolve the error.

import React, { useContext } from "react";
import AlertContext from "../context/AlertContext";

const Alert = () => {
  const {alerts} = useContext(AlertContext);

  return alerts !== null ? (
    <div
      className={`alert alert-${alerts.type} alert-dismissible fade show`}
      role="alert"
    >
      {alerts.message}
    </div>
  ) : (
    <></>
  );
};

export default Alert;

edited Aug 4, 2023 at 18:23

answered Aug 4, 2023 at 17:28

user22340374

11 bronze badge

Collectives™ on Stack Overflow

Not able to access react state using Context API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related