Attach a method/function to a functional component in React

Question

In a class component we can do this:

class Block extends React.Component {
  public static customFunction1(){
    return whatever;
  }
  
  public static customFunction2(){
    return whatever;
  }

  render(){
     return <Component />
  }
}

So with the above component, we can directly use <Block /> wherever we want, and also utilize Block.customFunction() and the other one as well.

Now talking about Functional Component:

We tried doing

const Block = () => {
  return <Component />
}

Block.customFunction1 = () => {
  return whatever;
}

Block.customFunction2 = () => {
  return whatever;
}

People are not recommending the above approach. I'm wondering what should be the approach which attaching methods to Functional Component?

Why not passing them as props - Block({ canClick, canSpan }) {}? — moonwave99
– moonwave99, Commented Sep 12, 2022 at 19:52
The parent component should control whether the child is clickable/span-able. — JBaczuk
– JBaczuk, Commented Sep 12, 2022 at 19:56

Viktor Luft · Accepted Answer · 2022-09-12 20:26:08Z

1

I don't think that there is actually a real relevance to do it like that. If you would use TypeScript for instance, you would make typing of this part of the code harder and there are actually other "reserved" properties that are used by React, e.g. "propTypes" or "displayName". That is the reason why you shouldn't do it, as you did it.

Another approach just for grouping these kind of elements that is more clean is the following:

Block.Component = () => {}

Block.onClick = (props) => {
  return true/false
} 

Block.onSpan = () => {
  return true/false
}

Now you are not attaching the properties to the component that is used by React internally, but still have the grouping and flexibility you need.

answered Sep 12, 2022 at 20:26

Viktor Luft

9415 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dhaval Jardosh Over a year ago

Ahh that's interesting. So Block.Component, can be used in any other element simply as <Block />? or we need to use <Block.Component />?

Viktor Luft Over a year ago

It would be the latter: <Block.Component />

Alexandre Daubricourt Over a year ago

I see so much limitations with functional components its unbelievable..

Collectives™ on Stack Overflow

Attach a method/function to a functional component in React

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related