UseCookies in reactjs not working well

I need to check whenever the cookie name is Login or Default to check if the person is logged in so i wrote a simple if statement

const[cookie,setCookie,removeCookie] = useCookies(['']);

  if(cookie.Login !== null){
      // some code....
        console.log("Login checker")
    }else{
       // some other code
        console.log("Logout checker")
    }

When i check the cookie name it is Clearly Default there is no Login Cookie (so the user is no logged in)
but it still goes throughs the first statement. and shows Login checker in the console.log

is the UseCookie just terrible or am i doing something wrong??
please help me with this

You need to provide the actual code here: what’s the function useCookie? With no idea what it is, then we can’t provide any help because there is no possible way we can know what it’s supposed to do

sure:


import { useCookies } from "react-cookie";


    const[cookie,setCookie,removeCookie] = useCookies(['']);
useEffect(() => {

  (async () =>{

    console.log("first render")

    const category = await axios.get("https://localhost:44332/Admin/Categorys")

let Cardres;

    if(cookie.Login !== null){
     Cardres = await axios.get('https://localhost:44332/api/UserProducts/GetAllOrders/' + cookie.Login)
    
    }
   
    if(cookie.Default !== null){
    Cardres = await axios.get('https://localhost:44332/api/UserProducts/GetAllOrders/' + cookie.Default)
    }
    
    if(Cardres.status === 200)
    {
      setCard(Cardres.data);
      console.log("card data", Cardres.data);
    }
if(category.status === 200){
  setCategoryData(category.data)}

  })()
},[])

and i have another code that is not working with cookie:

import { useCookies } from "react-cookie";


const[cookie,setCookie,removeCookie] = useCookies(['']);
useEffect(() =>{

(async() =>{
    let cardes;
    let totalprice;

    if(cookie.Login !== null){
        cardes = await axios.get('https://localhost:44332/api/UserProducts/GetCard/' + cookie.Login)
        totalprice = await axios.get('https://localhost:44332/api/UserProducts/Totalprice/' + cookie.Login)
        setAcces(cookie.Login)
        console.log("Login checker")
    }else{
        cardes = await axios.get('https://localhost:44332/api/UserProducts/GetCard/' + cookie.Default)
        totalprice = await axios.get('https://localhost:44332/api/UserProducts/Totalprice/' + cookie.Default)
        setAcces(cookie.Default)
        console.log("Logout checker",  cookie.Default)
    }
        if(cardes.status === 200) {
           setdata(cardes.data)
           setLoading(false)
           setSucces(true);
           console.log("all data",  cardes.data)
        }   
        if(totalprice.status === 200)
           setTotalPrice(totalprice.data);
   
})()
},[render]) 

If you’re using the react-cookie library that turns up as the first Google result, then the first value in the array that the useCookies isn’t a cookie, it’s a object with some functions attached to it. One of those lets you pick a specific cookie (like cookies.get, as in the examples). You could have many cookies present, it can’t just be a single thing

If that isn’t the library you’re using, I’m just guessing here, then, again, you need to actually say what the useCookie function is.

Thanks for your reply.

Im using the “react-cookie” library
What would you recommend to check if a specific cookie exist.
the “if(cookie.Login !== null)” method is not working very well

or can i rather install a other librays or use a different method if so wich one would you recommend.

cookie doesn’t have a property “Login”

cookie, which is just an arbitrary variable name that you’ve called it, is an object.

cookies

Javascript object with all your cookies. The key is the cookie name.

When i look at the examples. In order to get a cookie you have to type
“cookie.” and then the name of the cookie so: “cookie.Login” or “cookie.Cookiename1” etc

got the example from the page:

function App() {
  const [cookies, setCookie] = useCookies(['name']);

  function onChange(newName) {
    setCookie('name', newName, { path: '/' });
  }

  return (
    <div>
      <NameForm name={cookies.name} onChange={onChange} />
      {cookies.name && <h1>Hello {cookies.name}!</h1>}
    </div>

the example is the same as how i got the cookies. so i dont think im doing something wrong am i?

Sorry, it seems to have conflicting advice in the instructions. Possibly this is correct, but there is also a get method that also seems to do the same thing. What happens if you log the object?

when i console.log the object cookie.Login it says “undefined”

I think i will use the if statement

 if(cookie.Login !== undefined)

instead of:

 if(cookie.Login !== null)

it seems to work so far :sweat_smile:

Object properties are usually not null unless they explicitly are set as such.

let age;

const obj = {
  name: 'test',
  age,
  explicitNull: null
}

console.log(typeof obj.name); // string
console.log(typeof obj.age); // undefined
console.log(typeof obj.somePropThatDoesNotExist); // undefined

console.log(typeof obj.explicitNull); // object (yes that is a bit confusing, legacy language cruft)
console.log(obj.explicitNull); // null

Yes, bearing in mind what @lasjorg said, what you are now saying “as long as there isn’t a property with the key Login and the value null, run this code”. So you’re not checking that Login is there, you’re doing the almost the exact opposite. It’s running the way you by accident.

What is the value of the object you have called “cookie”. I get that cookie.Login is undefined, that is likely to mean the property Login isn’t defined, it isn’t there

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.