React JS inherit functionally to several components

Question

I have a component with functionally, let's say if you click on it, it does: alert("Hello World");

But now, let's say I want several components to have the same functionality, and these components can be expanded in the future, how can I do that in good way?

I thought about HOC but then I would have to decide which element to use, for example <div> but I want it to be generic so I could decide to put inside whatever element I need.

@azium what is the alternative if I use Class based components? — Dorki
– Dorki, Commented Apr 13, 2020 at 14:38
@Dorki it is not an article, they are the official docs of react. — Gabriele Petrioli
– Gabriele Petrioli, Commented Apr 13, 2020 at 14:51

twharmon · Accepted Answer · 2020-04-13 14:52:50Z

2

In many cases, I would suggest creating custom hooks or render props to reuse functionality. For your example, however, you could just have a very simple file:

// alert.js
const Alert = msg => ({
  onClick: () => alert(msg),
})

export default Alert

And use it like this:

const MyComponent = () => {
  return (
    <div { ...Alert('Hello World') }>
      click me
    </div>
  )
}

edited Apr 13, 2020 at 14:52

answered Apr 13, 2020 at 14:39

twharmon

3,7905 gold badges27 silver badges50 bronze badges

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

1 Comment

Dorki Over a year ago

Thank you, could you add @azium link about how to do that in Class based component? this link: reactjs.org/docs/render-props.html so others could also see other options to implement that

S Q · Accepted Answer · 2020-04-13 15:18:39Z

1

Here is a potential solution I came up with that uses React's createClass function. You could rework to handle many (i.e. unlimited) elements within that main element, so that each child could have it's own tag, too

answered Apr 13, 2020 at 15:18

S Q

1298 bronze badges

Collectives™ on Stack Overflow

React JS inherit functionally to several components

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related