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