Uncaught TypeError: cookies.get is not a function

[Tim-Knappe]

Im trying to set up a darkmode cookie but i cant seem to get it working without problems

Im sharing this because I believe that there are possibly others with the same problem.

Im getting an Uncaught TypeError: cookies.get is not a function

im using react-cookie 4.1.1

import "./Settings.css"
import { Link } from "react-router-dom"
import { Box, FormControlLabel, Switch } from "@mui/material"
import React, { useEffect, useState } from "react"
import { useCookies } from "react-cookie";


export function Settings(){

   

const[cookies, setCookie, removeCookie] = useCookies(["darkmodeCookie"])

setCookie("darkmodeCookie", false)

function handleChange(){}

let getVal = cookies.get("darkmodeCookie");

    return(



<div>

     <h1>Settings</h1>

        

    <ul>
        
    <h1>{getVal}</h1>
        <h3>Ansicht</h3>
        <li><Box><FormControlLabel label="darkmode" control={<Switch onChange={handleChange} checked={true}/>}/></Box></li>
        <h3>Privatsphäre</h3>
        <li>test  <Link to="/settings/cookies" ><p className="moreInfoLink">mehr Erfahren</p></Link></li>
    </ul>
    

    </div>

        )
    }

End of Settings.js

import {withCookies} from "react-cookie"



function App() {

  
function CookiePopUp(){ // use after the render of the app return, useEffect not working try: componentDidMount
  
    const [cookieConsent, setConsentCookie] = useState(Cookies.get('cookieConsent') || 'undetermined');
  
    const handleAccept = () => {
      Cookies.set("consentCookie", "accepted", { expires: 365 });
      setConsentCookie("accepted");
    }
  
    if (cookieConsent === 'accepted') {
      return null;
    }else{
      return (
      <div className="PopUpConsentCookie">
        <p>Diese Website nutzt Cookies um die Benutzererfahrung zu verbessern</p>
        <button onClick={handleAccept}>Accept</button>
      </div>);
      }
}  

let persID = JSON.parse(localStorage.getItem("currentUser")); 

// https://www.youtube.com/watch?v=vYL2wfmF3OQ für die menü leiste menu icon benutzen

  return (

    <>
    <Routes>
      <Route path="/settings" element={<Settings />} />
    </Routes>
    </>
  )
}
export default withCookies(App);

End of App.js

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { CookiesProvider } from 'react-cookie';


import { BrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <CookiesProvider>
    <App />
    </CookiesProvider>
    </BrowserRouter>
  </React.StrictMode>
);

Thank you for any help, and im sorry for any incovinience if the issue is caused by a mistake i made

[KevinFerreira]

Want to update here with what I did when running into this (lastest version "^4.1.1"):

Had the same error, but noticed the type of cookies when accessing it from the useCookies() hook, so:

My solution that pulled the cookie I needed (a cookie I created with react-cookie):

const [cookies] = useCookies();

console.info('cookie', cookies['cookie_name_here']);

>> cookie value logged correctly

[Tim-Knappe]

This worked thank you.