CODEWITHSUNDEEP
javascriptreactjsinheritanceextending-classes
Brian Boyko
Brian Boyko

Reputation: 637

Overriding Methods in React components - an antipattern, but how do I do it?

Believe me when I say that if I had any other choice, I would take it, but I am at my wits end.

I'm working for a big corporation which already has a whole library dedicated to authorization. And the authorization works, for the most part, however, the way it works is by putting your app between the Authorization Component in the render function, like so. You cannot change the code of the Authorization Component.

You are also expected to use the library's own Redux store, and you can add reducers, but not middleware, to this library. You cannot touch this code. 

   <Provider store={importedStore}>
     <AuthorisedComponent
        organisationId={orgId}
        journeyConfig={journeyConfig}
        allowUnauthorised={true}
        data-selector="journey"
      >
        <YourApp/>
      </AuthorisedComponent>
   </Provider>

Here's where things get tricky - and a little... unconventional. AuthorizedComponent is making the API call to get the JWT token, so far, so good, but it is not storing the jwt token anywhere in memory, session storage, or local storage. Instead, it is storing it in an internal state which is not publicly accessible. I can, however, look at the source code.

I need that JWT token to make an API call in order to build this new feature.

What I've thought about doing is:

const ExtendedAuthorizedComponent = React.cloneElement(<AuthorizedComponent/>)
ExtendedAuthorizedComponent.prototype.handleLogin = new function.

I know this is an antipattern. I know you're not supposed to do this. But I'm running out of time and two wrongs are the only way to make this right.

Upvotes: 0

Views: 61

Answers (0)

Related Questions