Lifting reactjs state using hooks

Child.js

import React, { useState } from "react";

export default function Child(props) {
  const handleChange = event => {
    props.onChange(event.target.value);
  };

  return (
    <div>
      <input value={props.value} onChange={handleChange} />
    </div>
  );
}

Parent.js

import React, { useState, useEffect } from "react";
import Child from "./Child";

export default function Parent(props) {
  const [value, setValue] = useState("");

  const handleChange = newVal => {
    setValue(newVal);
  };

  return (
    <div className="App">
      <h2> {value} </h2>
      <Child value={value} onChange={handleChange} />;
    </div>
  );
}