ReactJs: How to create a wrapper component that would execute certain code when clicked and render the child component?

Question

I am trying to create a generic React component that I could wrap around any component and that would execute some code when it's clicked:

class WrapperComponent extends React.Component {
  constructor() {
    super();
    this.state = {};
    this.onElementClicked = this.onElementClicked.bind(this);
  }
  onElementClicked() {
    // CODE TO BE EXECUTED WHEN WRAPPER ELEMENT IS LICKED
  }
  render() {
    const {child_component}=this.props
    return (
      <span
        onClick={() => {
          this.onElementClicked();
        }}
      >
        {child_component}
      </span>
    );
  }
}

And this how I'd use it:

  <WrapperComponent
    component={<Button>Test</Button>}
  ></WrapperComponent>

This works perfectly fine.
However, I don't feel that it's right to follow this approach. This is what I would like to achieve:

  <WrapperComponent>
        <Button>Test</Button>
      </WrapperComponent>

So that all I have to do is literally wrap whichever element I want with WrapperComponent and achieve the same result.
Is that possible?

maybe have a look at render props? https://reactjs.org/docs/render-props.html — boxdox, Jul 06 '21 at 16:22
See if you can leverage props.children - https://stackoverflow.com/questions/49706823/what-is-this-props-children-and-when-you-should-use-it — Tushar Shahi, Jul 06 '21 at 16:22
using HOC? https://stackoverflow.com/questions/52705522/higher-order-react-component-for-click-tracking — Dan, Jul 06 '21 at 16:32

score 1 · Accepted Answer · answered Jul 06 '21 at 16:21

1

are you looking for something like this? https://reactjs.org/docs/composition-vs-inheritance.html

you might be able to access the child component using props.children

answered Jul 06 '21 at 16:21

Raj Dhanani

68
7

ReactJs: How to create a wrapper component that would execute certain code when clicked and render the child component?

1 Answers1