title: Pass onClick functions as parameters through a lot of components
body: <p>I have the following question. Suppouse that I have the following code:</p>
  <pre><code>function Page(){
  
    const onClick = () =&gt; {
      // Do some code
    }
  
    return (
      &lt;Organism onClick={() =&gt; onClick()} /&gt;
    )  
  }
  
  function Organism({onClick}){
  
    return (
      &lt;Molecule onClick={() =&gt; onClick()} /&gt;
    )  
  }
  
  function Molecule({onClick}){
  
    return (
      &lt;Atom onClick={() =&gt; onClick()} /&gt;
    )  
  }
  
  function Atom({onClick}){
  
    return (
      &lt;Atom onClick={() =&gt; onClick()} /&gt;
    )  
  }
  </code></pre>
  <p>Atom, Molecule and Organism can be used in another pieces of code across the project. I find it very hard for debugging, but I can not find another way of building react components without duplicating code. Is it a good practice? Is there another alternative?</p>
  <p>Thanks</p>