Why am I getting ,, Cannot read property 'load' of undefined" - reactjs

Question

I have defined cookie in my project like this.
import cookie from 'react-cookie'. So that means I have defined cookie so I shouldn't be getting that error but sitll I am getting it.. I will share my code if anyone thinks it's needed.
EDIT
I om only adding here half of the code since I have to add some more details with the full code And I have no I idea what to add. The full code can be found here https://pastebin.com/APTdX879
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Block from "./Block"
import Add from './Add'
import cookie from 'react-cookie'
class App extends Component {
constructor(props){
super(props)
this.state = {
logedin: cookie.load("logedin")
}
}
submit(){
fetch("/newaccount")
.then(res=>res.json())
.then(data=>{
console.log(data)
console.log(document.getElementById('username').value)
let arr = data.filter(event=>{
return (event.username==document.getElementById('username').value&&event.password==document.getElementById('password').value)
})
console.log(arr.length)
console.log(arr)
if(arr.length==1){
this.setState({logedin:true})
}
else{
alert("wrong useranme or password")
}
})
}
componentDidMount(){
fetch("/api")
.then(response=>response.json())
.then(data=> this.setState({data: data}))
.catch(error=>console.log(error+' 1'))
}
componentWillMount() {
}
render() {
if(!this.state.logedin){
return (
<div>
<input id="username"/>
<input id='password' type="password"/>
<button onClick={this.submit.bind(this)}>Submit</button>
</div>
)
}
if(!this.state.data){
return <p>loading</p>
}
return (
<div>
<hr/>
<Add/>
{
this.state.data.map((data,i)=>{
return(
<div key={i+"a"}>
<Block name={data.username} img={data.img} date={data.date} text={data.text} likes={data.likes} comments={data.comments} key={i} id={data._id}></Block>
<br key={i+"b"}/>
</div>
)
})
}
</div>
*Second EDIT here is a screenshot of the error http://prntscr.com/gghb5p .

Answer 1

According to the react-cookie documentation at https://www.npmjs.com/package/react-cookie you should import it like this:
import { CookiesProvider, withCookies, Cookies } from 'react-cookie';
And then getting a cookie in the constructor won't work, you will need to do it in the componentWillMount() method like this:
componentWillMount() {
const { cookies } = this.props;
this.state = {
name: cookies.get('name') || 'Ben'
};
}

Answer 2

try to inject it first:
import { withCookies } from 'react-cookie';
export default withCookies(App);
or
App = withCookies(App);
and then in your constructor:
this.state = {
logedin: props.cookies.get("logedin")
}
EDIT: in documentation of react-cookie there is no load method, I think you need
logedin: props.cookies.get("logedin")