How to add a button using Higher Order Component in reactjs

Question

How can I add a button to a component using higher order component? I tried this but its not adding the button inside the component. Its adding it before the original component.

const withButton = WrappedComponent => {
  return class extends Component {
    render() {
      return (
        <Fragment>
          <button>BUTTON ADDED USING HOC</button>
          <WrappedComponent {...this.props} />
        </Fragment>
      )
    }
  }
}
export default withButton

When I call the HOF like this

const ComponentWithButton = withButton(WrappedComponent)

ComponentWithButton has button added but its adding before WrappedComponent whereas I want to add button inside as a child of the WrappedComponent.

Lets say that WrappedComponent is rendering something like

<div className="baseClass">{other divs and layout}</div>

const ComponentWithButton = withButton(WrappedComponent)

ComponentWithButton should render the following

<div className="baseClass">
<button>BUTTON ADDED USING HOC</button>
{other divs and layout}
</div>

Please, clarify what do you mean by 'inside'. As a child? What should happen with WrappedComponent's own children? Please add an example for WrappedComponent and how you expect the layout to be modified by withButton. — Estus Flask
– Estus Flask, Commented May 5, 2019 at 10:09
Hi estus, yes i want button to be added inside the wrapped component as a child. The wrapped component already has basic styling and I just want to add button which will also be a part of the wrapped component when necessary — user11399165
– user11399165, Commented May 5, 2019 at 10:12
Did you try putting the button inside wrapped component ? <Fragment> <WrappedComponent {...this.props}> <button>BUTTON ADDED USING HOC</button> </WrappedComponent> </Fragment> — Etherealm
– Etherealm, Commented May 5, 2019 at 10:16
This still depends on WrappedComponent. Does <WrappedComponent {...this.props}><button>...</button></WrappedComponent> do what you want? Please, provide an example in case it doesn't. — Estus Flask
– Estus Flask, Commented May 5, 2019 at 10:16
If I add button inside the <WrappedComponent />, <WrappedComponent /> will only have button side — user11399165
– user11399165, Commented May 5, 2019 at 10:24

Dennis Vash · Accepted Answer · 2019-05-05 10:34:56Z

1

Try using props.children, also refer to React.Children API

function ComponentWithButton({ children }) {
  return (
    <>
      <button>BUTTON ADDED USING HOC</button>
      {children}
    </>
  );
}

And then render:

<ComponentWithButton>
  <WrappedComponent />
</ComponentWithButton>

With classes:

class ComponentWithButton extends Component {
  render() {
    const { children } = this.props;
    return (
      <>
        <button>BUTTON ADDED USING HOC</button>
        {children}
      </>
    );
  }
}
export default ComponentWithButton;

edited May 5, 2019 at 10:34

answered May 5, 2019 at 10:29

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

Comments

Sandeep P · Accepted Answer · 2019-05-05 10:29:29Z

If you want to dynamically place the button somewhere inside the WrappedComponent, you can try something like this.

const withButton = WrappedComponent => {
  return class extends Component {
    render() {
      return (
        <Fragment>
          <WrappedComponent {...this.props}>
            <button>BUTTON ADDED USING HOC</button>
          </WrappedCompnent>
        </Fragment>
      )
    }
  }
}
export default withButton

Now in your wrapped component, you can place the button any where you want as the button would be accessible as a property children to WrappedComponent.

const WrappedComponent = ({ children, ...otherProps }) => (
  <div className="baseClass">
    {children}
    {renderOtherDivsAndProps(otherProps)}
  </div>
);

Hope this helps you

Dennis Vash · Accepted Answer · 2019-05-05 12:11:29Z

0

I tried this and I am getting what I am looking for.

const withButton = WrappedComponent => {
  return class extends Component {
    render() {
      return (
          <WrappedComponent {...this.props}>
            <button>BUTTON ADDED USING HOC</button>
            {this.props.children}
          </Wrappedcomponent>
      )
    }
  }
}
export default withButton

edited May 5, 2019 at 12:11

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

answered May 5, 2019 at 10:46

user11399165

1012 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to add a button using Higher Order Component in reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related