Converting function React component to class component - node.js

Question

I'm trying to add a login page to my existing app. Following along this tutorial https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications
Got stuck in step 3. My app is a class component, while in the tutorial it's a function component.
How can I convert this to a class component?
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
import Dashboard from '../Dashboard/Dashboard';
import Login from '../Login/Login';
import Preferences from '../Preferences/Preferences';
function setToken(userToken) {
sessionStorage.setItem('token', JSON.stringify(userToken));
}
function getToken() {
const tokenString = sessionStorage.getItem('token');
const userToken = JSON.parse(tokenString);
return userToken?.token
}
function App() {
const token = getToken();
if(!token) {
return <Login setToken={setToken} />
}
return (
<div className="wrapper">
...
</div>
);
}
export default App;
I've tried as below, but it says getToken is not defined inside of a render.
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
import Dashboard from '../Dashboard/Dashboard';
import Login from '../Login/Login';
import Preferences from '../Preferences/Preferences';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
token: undefined
}
this.setToken = this.setToken.bind(this);
this.getToken = this.getToken.bind(this);
}
setToken(userToken) {
sessionStorage.setItem('token', JSON.stringify(userToken));
}
getToken() {
const tokenString = sessionStorage.getItem('token');
const userToken = JSON.parse(tokenString);
return userToken?.token;
}
render() {
const {token} = getToken(); /* In this line getToken is not defined */
if (!token) {
return <Login setToken={(newToken) => this.setState({ token: newToken })} />
}
return (
<div className="pomodoro-clock">
</div>
);
}
I see in the original code, getToken and setToken declared outside of an app. I've tried this, but anyway, getToken is not defined .
I can provide the full code if needed. Any help is appreciated.

Answer 1

If you want to make the functions members of the class, then you need to refer to it using this.getToken(), not just getToken();
render() {
const {token} = this.getToken();
Though since the getToken and setToken functions don't make any reference to this they don't actually need to part of the class. You could keep them outside the class, and refer to them the same way the function component refers to them:
function setToken(userToken) {
sessionStorage.setItem('token', JSON.stringify(userToken));
}
function getToken() {
const tokenString = sessionStorage.getItem('token');
const userToken = JSON.parse(tokenString);
return userToken?.token
}
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
const {token} = getToken();
// ...
}
}