title: handling events on custom components
body: <p>I have these files:</p>
  <p><strong>button.module.css</strong></p>
  <pre><code>.base {
      display: flex;
      font-size: 16px;
      font-family: &quot;Helvetica Neue&quot;;
      align-items: center;
      justify-content: center;
      padding: 6px 12px 6px 12px;
      width: 50px;
      border-radius: 6px;
  }
  
  .normal {
      composes: base;
      color:black;
      background-color: #aeeeb7;
      border: 1px solid #42924d;;
  }
  
  .danger {
      composes: base;
      color:black;
      background-color: rgb(253, 128, 128);
      border: 1px solid rgb(196, 108, 108);
  }
  </code></pre>
  <p><strong>button.js</strong></p>
  <pre><code>import classes from './button.module.css';
  
  const ButtonTypes = {
      'normal': classes.normal, 
      'danger': classes.danger
  };
  
  const Button = (props) =&gt; {
      const className = ButtonTypes[props.type] ? ButtonTypes[props.type] : classes.normal;
      return &lt;div role=&quot;button&quot; className={className} ...props&gt;{text}&lt;/div&gt;;
  }
  
  export default Button;
  </code></pre>
  <p><strong>app.js</strong></p>
  <pre><code>import Button from './button';
  
  const App = () =&gt; {
    const handleClick = () =&gt; {
      console.log('app');
    }
  
    const handleMouseOver = () =&gt; {
      console.log('mouse-over');
    }
  
    ...
  
    return (
       &lt;div&gt;
         &lt;Button type=&quot;normal&quot; onClick=(handleClick) onMouseOver={handleMouseOver} ...&gt;
       &lt;/div&gt;
    );
  }
  
  export default Button;
  </code></pre>
  <p>I am changing the class of the button depending on the &quot;type&quot; property. (It could be other components not just a button)</p>
  <p>How should I handle events on the custom component? Is the way I am passing them right now to that div inside fine or I should do it differently?</p>
  <p>I want to create some custom components and I am trying to verify I am doing it the right way.</p>