React - Passing a value from child component to the parent component - reactjs

Question

Using Hooks, how can I pass the item.id from the child component to the parent component by clicking the button inside the child component?
The parent component:
import React from 'react'
import MyList from '../MyList'
const App = props => {
return (
<div className='App'>
<MyList />
</div>
)
}
export default App
The child component:
import React from 'react'
import jsonResponse from '../data'
function MyList (props) {
const list = jsonResponse.map((item) => {
return (
<li className='list-container' key={item.id}>
<h4>Name: {item.name}</h4>
<button className='btn'>More details</button>
</li>
)
})
return (
<ul id='container'>
{list}
</ul>
)
}
export default MyList

Answer 1

React is all about data flowing down in the components tree. If you want your Child to be able to show and/or modify a shared state between Child and Parent you should lift your state up and pass it down via props to it's children
const Parent = () =>{
const [title, settitle] = useState('foo')
return <Child title={title} setTitle={setTitle} />
}
const Child = ({ title, setTitle}) =>{
return <input value={title} onChange={e => setTitle(e.target.value)} />
}
In class based components
class Parent extends React.Component{
state = { title: '' }
setTitle = title => this.setState({ title })
render(){
const { title } = this.state
return <Child title={title} setTitle={this.setTitle} />
}
}
class Child extends React.Component{
render(){
const { title, setTitle } = this.props
return <input value={value} setTitle={e => setTitle(e.target.value)} />
}
}
But if you really insists that your Child holds the state (anti pattern) you can do something like this
const Parent = () =>{
const [childProp, setChildProp] = useState(null)
return <Child setChildProp={setChildProp} />
}
const Child = ({ setChildProp }) =>{
return <button onClick={() => setChildProp('foo')}>Change to foo</button>
}