title: React running a function inside onClick of a button inside parent component
body: <p>I have two components a child and a parent so the child is a div with a button inside it and inside the parent i call it with the onclick property with function inside it is it possible ?</p>
  
  <p>Button.js</p>
  
  <pre><code>import React from "react";
  
  const Button =() =&gt; {
    return(
      &lt;div&gt;
        &lt;button&gt; &gt;Hello world&lt;/button&gt;
      &lt;/div&gt;
    )
  }
  export default Button;
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Button from "./button";
  import "./styles.css";
  
  const  handleClick = () =&gt; {
    return(&lt;h1&gt;Hello world..!&lt;/h1&gt;)
  
  }
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        &lt;Button onClick={handleClick()} /&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  
  </code></pre>