Use a Higher order component to add mouse events to a host component

GetNasty.js

import React from "react";

export default function GetNasty(TargetComponent){
  return class GetNasty extends React.Component{
    handleOnClick($event){
      alert("You suck!");
    }

    render(){
      const props = Object.assign({
        onClick: this.handleOnClick
      }, this.props);

      return (<TargetComponent {...props}/>);
    }
  }
}

NastyButton.js

import React from "react";
import GetNasty from "./GetNasty";

class Button extends React.Component{
  render(){
    return (
      <button {...this.props}>click me</button>
    );
  }
}

const NastyButton = GetNasty(Button);
export default NastyButton;

I'm not really happy with the use of {..this.props} on the render method of the host component (Button)