Why does passing event handler to child component not work

I am experimenting with passing event handlers to parent components so I wrote this code:

import React, { useState } from "react";

export default function App() {
  const [val, setVal] = useState("");

  function handleChange(event) {

  return (
    <div className="App">
      <TextInput onChange={handleChange} />

function TextInput(props) {
  return <input onChange={props.handleChange} type="text" />;

const rootElement = document.getElementById("root");
    <App />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

(I don’t know why stackoverflow cant handle export in above code, how do I make that work? Here is codesandbox – https://codesandbox.io/s/onchange-test-1pxdr?file=/src/index.js)

I would expect when typing in box the text under the box should update but nothing happens and no error. Why is this?


It should be onChange={props.onChange}

  function TextInput(props) {
      return <input onChange={props.onChange} type="text" />;

Leave a Reply

Your email address will not be published. Required fields are marked *