CODEWITHSUNDEEP
reactjsoop
Maifee Ul Asad
Maifee Ul Asad

Reputation: 4607

can't extend react extended class

I have more than 20 components in my react project. So doing the same thing for every component would be so unwise, so from oop concepts if I create a class with all the functionalities, then I can use it for all the objects I want.

In my case, I want to check if a user is logged in or not. If not redirect to '/login'. Now I have 'NavigationBar' inside each component, where I'm writing some code to redirect or not. But for a few seconds I can see then snap of each components, especially those large ones.

This is not also wise step

So here is what I tried next, created a component named Core extending React.Component, then I extended all component from it, but it gives me error directly.

What is the actual problem here? How this can be solved?

codesandbox.io

Upvotes: 0

Views: 725

Answers (2)

Navin Gelot
Navin Gelot

Reputation: 1334

just add this line to Child.js

import React from "react";

Upvotes: 1

Yves Kipondo
Yves Kipondo

Reputation: 5603

React doesn't allow creation of component by subclassing defined component, the only way to create component is to extends directly the React.Component class, But react allow you to add extra behavior to defined component by using Higher-Order Components which has purpose to alter defined component by adding wrapper to and existing component 

function wrapper(WrappedComponent) {
    return class extends React.Component {

        render() {
            // Here you can add any logic you want 


            return (<div>
                // Here you can add extra code
                <h1>Code rendered by wapper</h1>
                <WrappedComponent {...this.props} />;
            </div>
        }
    }
}

And you use it like this

import wrapper from './wrapper';
import Child from './Child';

const HigherWrapper = wrapper(Child);

const rootElement = document.getElementById("root");
ReactDOM.render(<HigherWrapper />, rootElement);

Upvotes: 0

Related Questions