menu

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

Extending functional components - possible?

January 18, 2020 at 1:59am

Extending functional components - possible?

January 18, 2020 at 1:59am
I'm looking to rewrite my class component into a functional component. Currently I have something like this:
class Component extends AnotherComponent { ... }
Is it possible to rewrite this into a functional component const Component = props => { ... }?

January 18, 2020 at 3:58am
Yes, it is possible to rewrite it.
It would not be easy or ideomatic to try to extend another component with a functional component. Instead move shared functionality to React hook(s). https://reactjs.org/docs/hooks-intro.html
Which can be used in as many components as wanted.
  • reply
  • like

January 20, 2020 at 6:26am
definetly posible go to my github repo
  • reply
  • like
import React from 'react'
import AnotherComponent from './AnotherComponent'
export const Component = props => {
return (
...
<AnotherComponent {...props} />
...
}
Edited
  • reply
  • like

January 24, 2020 at 6:03am
The issue is that I don't have control over the component meant to be extended. I'm using Next.js' custom Document component, example usage here: https://nextjs.org/docs/advanced-features/custom-document
Perhaps there's no point of doing this, oftentimes I catch myself over-optimizing. But it would be good to know if this is actually achievable.
  • reply
  • like