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>

Answer 1

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

Answer 2

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;

Answer 3

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