Is there any way to extends another class instead of Component class in react-js

Question

I am developing a website using react-js. i am implementing middlware functions by extending to another class.

i have multiple Components like

export default class Login extends React.Component{} // for public group
export default class Register extends React.Component{} // for public group

export default class Profile extends React.Component{} // for Private group
export default class Settings extends React.Component{} // for Private group
export default class EditProfile extends React.Component{} // for Private group

How wonder if i create two class one class Private and another will be class public that extends to the my private and public group components that call one function for checking that there Auth token is still valid or not by this i do not have to call same function again and again in every component i tried this but my IDE says

Parsing error: Classes can only extend a single class.eslint

If this is a dumb idea please comment me how you do it without Redux.

the final code will be like

export default class Login extends Public, React.Component{} // for public group
export default class Register extends Public, React.Component{} // for public group

export default class Profile extends Private, React.Component{} // for Private group
export default class Settings extends private, React.Component{} // for Private group
export default class EditProfile extends Private, React.Component{} // for Private group

Sorry for poor english.

Answer 1

There is no multiple inheritance in JavaScript.

But you can do some workarounds. Ex Multiple inheritance/prototypes in JavaScript

But in React you should extend just from one Class. So, you should encapsulate all needed functionality in the Private and Public classes which should be extended from React.Component.

class Public extends React.Component {}
class Private extends React.Component {}

export default class Login extends Public {}
export default class Register extends Public {}

export default class Profile extends Private {}
export default class Settings extends Private {}
export default class EditProfile extends Private {}

If you want to get functionality to just check if a user is authorized without Redux.

You can create a HOC. You can read more here https://reactjs.org/docs/higher-order-components.html#use-hocs-for-cross-cutting-concerns

function private(Component) {
  const isTokenValid = ... // here your stuff

  if (isTokenValid) return Component;
  else ... // do your needed stuff. For example, redirect to the Login page.
}

// I'm not sure if this HOC(High Order Component) is needed, but anyway
function public(Component) {
  const isTokenValid = ... // here your stuff

  if (isTokenValid) // do your needed stuff. For example, redirect to the Main page.
  else return Component; 
}

export class Login extends React.Component {}
export class Register extends React.Component {}

export class Profile extends React.Component {}
export class Settings extends React.Component {}
export class EditProfile extends React.Component {}

export const ProtectedLogin = public(Login);
export const ProtectedRegister =  public(Register);

export const ProtectedProfile = private(Profile);
export const ProtectedSettings = private(Settings);
export const ProtectedEditProfile = private(EditProfile);