title: Why does passing event handler to child component not work
body: <p>I am experimenting with passing event handlers to parent components so I wrote this code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  
  export default function App() {
    const [val, setVal] = useState("");
  
    function handleChange(event) {
      console.log(event.target);
      setVal(event.target.value);
    }
  
    return (
      &lt;div className="App"&gt;
        &lt;TextInput onChange={handleChange} /&gt;
        &lt;div&gt;{val}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  function TextInput(props) {
    return &lt;input onChange={props.handleChange} type="text" /&gt;;
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    rootElement
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(I don't know why stackoverflow cant handle export in above code, how do I make that work?  Here is codesandbox - <a href="https://codesandbox.io/s/onchange-test-1pxdr?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/onchange-test-1pxdr?file=/src/index.js</a>)</p>
  <p>I would expect when typing in box the text under the box should update but nothing happens and no error.  Why is this?</p>