title: hand over function to onClick on props with parameters
body: <p>I encapsulated some HTML code to a extra class and want to hand over a function to it now.</p>
  
  <p>The parent class looks like this:</p>
  
  <pre><code>class Home extends React.Component {
  
    doSomething = id =&gt; {
    console.log(id);
    // here are some fetch operations only available in Home component
    };
  
    render() {
    return (
    &lt;Child doSomething={() =&gt; this.doSomething} /&gt;
    )
    }
  }
  </code></pre>
  
  <p>my Child component then looks like this:</p>
  
  <pre><code>const id = 3;
  const Child = ({doSomething}) =&gt;
  (
  
     &lt;Button onClick={doSomething(id)}&gt;Click&lt;/Button&gt;
  );
  export default Child
  </code></pre>
  
  <p>I was trying around with different solutions but either I get no result or the onClick function is called when the Home component is rendered instead of when clicking on the button.
  I want the function to be executed when the button is clicked. And the id parameter should be handed over as well. I can't have the function in the Child component itself since I have to use some redux actions in it which are not available in the child class.</p>
  
  <p>I know this is not a too difficult question but I'm still a noob with JavaScript..</p>
  
  <p>Edit: I accomplished having the event parameter inside my function but I wonder how to access the id with it. I can't simply add a prop to the Button element since it does not allow that.</p>
  
  <p>Thanks in advance for your help,</p>
  
  <p>Erik</p>