javascript - ReactJS Load Function “is not a function”

Question

I'm setting up a react-cookie npm package but trying to load cookies as to call users but getting a not a function. How do I set up this correctly?

This is what I had tried right now. When someone put in user id first-name and last-name it will go to http://192.168.1.163:3000/users/ page.

import React, { Component } from 'react';
import '../sass/main.scss';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import ModalLogin from '../components/Modal/Login';
import ModalSignup from '../components/Modal/Signup';
import { Cookies } from 'react-cookie';
import axios from 'axios';

class App extends Component {
    constructor() {
      super();
      // call user and that 
      var user = Cookies.load('user');
      var that= this;
      this.state = {name: null, signedIn: false}

      //  When someone put in user id first-name and last-name it will go to http://192.168.1.163:3000/users/ page
      if (user){
        axios.get('http://192.168.1.163:3000/users/' + user.id)
          .then(function (response) {
            console.log(response);
            that.setState({name: response.data.data.attributes['first-name'] + ' ' + response.data.data.attributes['last-name'], signedIn: true});
            //this.setState({ showModal: false });
          })
          .catch(function (error) {
            console.log(error);
          });
        }
      this.render.bind(this);
    }

    render() {
        return (
          <Navbar expand="lg">
              <Navbar.Brand href="#home">Kommonplaces</Navbar.Brand>
              <Navbar.Toggle aria-controls="basic-navbar-nav" />
              <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                  <Nav.Link href="#activities">Activities</Nav.Link>
                  <Nav.Link href="#space">List Your Space</Nav.Link>
                  <Nav.Link className={this.state.signedIn === true ? 'hidden' : ''}>Sign up</Nav.Link>
                  <Nav.Link className={this.state.signedIn === true ? 'hidden' : ''}>Log in</Nav.Link>
                </Nav>
              </Navbar.Collapse>
          </Navbar>
        );
    }
}

export default App;```

Answer 1

You are probably looking for get method on Cookies

  var user = Cookies.get('user');

https://github.com/reactivestack/cookies/tree/master/packages/react-cookie#getname-options