1// myContainer.js
2import React, { useState } from 'react'
3import MyChild from 'some/path/myChild'
4
5function MyContainer() {
6  const [name, setName] = useState('foo')
7
8  return (
9    <MyChild name={name} onNameChange={setName} />
10  )
11}
12
13export default MyContainer
14
15// myChild.js
16import React, { useCallback } from 'react'
17
18function MyChild({ name, onNameChange }) {
19
20  const handleInputChange = useCallback(event => {
21    onNameChange(event.target.value)
22  }, [onNameChange])
23
24  return (
25    <div>
26      <input type="text" onChange={handleInputChange} value={name} />
27      <div>The name is: {name}</div>
28    </div>
29  )
30}
31
32export default MyChild
33