Problems with Context Api React

Question

I'm trying to use the Context Api to save the user data that comes from the firebase api, but when I get these values in the component Index, it always returns the error: TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

Below is my code

Where do I create the Context

import React, { createContext, useState } from "react";

const Context = createContext();

function AuthProvider({children}) {

  const [userLogin, setUserLogin] = useState({});

  return (
    <Context.Provider value={{ userLogin, setUserLogin }} >
      { children }
    </Context.Provider>
  );
}

export { Context, AuthProvider }

Route File

 <React.StrictMode>
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/cadastrar' element={<Register />} />
          <Route path='/recuperar-senha' element={<Recovery />} />
          <Route path='/anuncios' exact element={<Index />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>

Here where I set the context with firebase data

    const {setUserLogin} = useContext(Context);
    
      const { register, handleSubmit, formState: { errors } } = useForm();
    
      const onSubmit = data => {
    
        const auth = getAuth();
    
        signInWithEmailAndPassword(auth, data.email, data.password)
          .then((userCredential) => {
            const user = userCredential.user;
    
            setUserLogin({user});
    
            navigate('/anuncios');
          })
          .catch((error) => {
            let erroMessage = localizeErrorMap(error.code)
    
            Toast('error', erroMessage);
          })
      };

I want to save the data in the context api and be able to take, for example, the component below and the others

import React, {useContext} from "react";

import  { Context } from '../providers/auth';


export default function Index() {

  const [user, setUserLogin] = useContext(Context);
  //console.log(user);
  return (
    <h1>Logado {user}</h1>
  )
}

I saw that in the browser console when I click on the component, it informs that the problem is in the line: const [user, setUserLogin] = useContext(Context);

const [user, setUserLogin] = useContext(Context);

Kay
– Kay

2022-08-14 17:48:11 +00:00
Commented Aug 14, 2022 at 17:48 — Kay
– Kay, Commented Aug 14, 2022 at 17:48

tklg · Accepted Answer · 2022-08-15 12:40:11Z

2

Your context value is { userLogin, setUserLogin }:

<Context.Provider value={{ userLogin, setUserLogin }}>

so you cannot destructure it into an array. Use const { userLogin, setUserLogin } = useContext(Context) instead:

export default function Index() {
  const { userLogin, setUserLogin } = useContext(Context);
  console.log(userLogin);
  ...

edited Aug 15, 2022 at 12:40

answered Aug 14, 2022 at 18:02

tklg

2,6522 gold badges21 silver badges24 bronze badges

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

3 Comments

Moises Fausto Over a year ago

Thanks! No longer returns the error, but unable to access the object. In the console.log it returns undefined, but in the React Developer Tool, it shows that in the hook there is the Context.

Moises Fausto Over a year ago

I was able to access the context as follows: const userlogin = useContext(Context); console.log(userlogin.userLogin.email); Leaving the userLogin out of the object, is this a good practice or the correct way?

tklg Over a year ago

I had a typo in my answer (userlogin => userLogin), fixed it - userLogin shouldnt be undefined now

Collectives™ on Stack Overflow

Problems with Context Api React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related