react-cookie doesn't save new cookie in cookies internal object and withCookie wrapper give me props.cookies undefined

Question

Hi I have following problems:

1.first problem

When user login into application then is triggered function async handleSubmitForm(). I'm trying to save token into cookies (this is only temporary solution...) calling method setTokenInCookies. I check cookies in browser's settings if there is my cookie and it is ! after refreshing page console.log(this.props.cookies) putted somewhere in my code (for example in render method) give me list of cookies, which doesn't contain my cookie.

import { Cookies, withCookies } from "react-cookie";

 class LoginPage extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };
  constructor(props) {
    super(props);
    this.handleSubmitForm = this.handleSubmitForm.bind(this);
    this.state = {
      token: props.cookies.get("token")
    };
  }

  setTokenInCookies(cookie, expires) {
    const { cookies } = this.props;
    const parseToDate = new Date(expires);
    cookies.set("token", cookie, { path: "/token", expires: parseToDate });
  }

  async handleSubmitForm(values) {
    const email = values.get("email");
    const password = values.get("password");
   
      const JSONLoginForm = JSON.stringify({ email, password });
      try {
        const response = await axios.post("/login", JSONLoginForm, config);
        console.log(response);
        const { data: { token: value, expiration: expires } } = response;
        this.setTokenInCookies(value, expires);
      } catch (error) {
        console.log("error", error);
      }
  }
  render() {
    return (
      <Panel>
        <LoginForm onSubmit={this.handleSubmitForm} />
        <Link to="/forgotten_password"> Forgot password </Link>
        <Link to="/signup">Sign Up</Link>
      </Panel>
    );
  }
}

function mapStateToProps() {
  return {};
}
function mapDispatchToProps() {
  return {};
}
const withCookieLoginPage = withCookies(LoginPage);

export default connect(mapStateToProps, mapDispatchToProps)(withCookieLoginPage);

2. second problem I would like to access to cookies in different component but console.log(this.props.cookies) give me undefined.

import React, { Component } from "react";
import styled, { ThemeProvider } from "styled-components";
import { Route } from "react-router-dom";
import { CookiesProvider, withCookies, Cookies } from "react-cookie";
import theme from "./themes/default";
import {instanceOf } from "prop-types";
import LoginPage from "./containers/LoginPage";
import ForgotPasswordPage from "./containers/ForgotPasswordPage";
import RegistrationPage from "./containers/RegistrationPage";
import WelcomePage from "./containers/WelcomePage";

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
`;

class App extends Component {
  constructor(props) {
    super(props);
  }
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };
  render() {
    console.log(this.props.cookies);
    return (
      <CookiesProvider>
        <ThemeProvider theme={theme}>
          <Wrapper>
            <Route exact path="/" component={LoginPage} />
            <Route path="/signup" component={RegistrationPage} />
            <Route path="/forgotten_password" component={ForgotPasswordPage} />
            <Route path="/logged" component={WelcomePage} />
          </Wrapper>
        </ThemeProvider>
      </CookiesProvider>
    );
  }
}

export default withCookies(App);

Answer 1

Few things:

• You need to import only the CookiesProvider in your App.
• If the reason you imported withCookies() in App is to print the cookies, a better approach is to install a plugin and inspect them directly from the browser.
• Placement of the log() call is incorrect in render() since you return the CookiesProvider (together with the rest of) component(s) after the log() call.
• Lastly I suggest to try the cookies.set() call only with path property set first to make sure it works (I actually had this problem myself).

Hope this helps.