title: is it ok to define a function inside a React stateless component?
body: <p>Is it bad practice to define a function (like <code>handleClick</code> in the example below) inside a stateless component? I was told that you should avoid doing so, but I can't find anything in the documentation to confirm it. If the answer is &quot;yes&quot; then why is defining a function into a class instead any better?</p>
  <pre><code>function MiniPalette(props) {
    const {classes } = props;
    
  
    function handleClick() {
      history.push(`palette/${id}`);
    }
  
    return (
      &lt;div className={classes.root} onClick={handleClick}&gt;
        &lt;div className={classes.colors}&gt;{miniColorBoxes}&lt;/div&gt;
        &lt;h5 className={classes.title}&gt;
          {paletteName}
          &lt;span className={classes.emoji}&gt;{emoji}&lt;/span&gt;
        &lt;/h5&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>