I was reading a tutorial on Medium that explained how to pass data from a child component to parent ( https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17 ). The tutorial got 5.5k likes, which means many people must've used it as a reference in their own work. However, upon replicating the code 1:1, I was completely unable to to get the same results. In fact, data wasn't being passed from the child to the parent at all. Plus, when I forced data to pass up, I got an infinite loop. I would greatly appreciate if anyone can point out where I am wrong, or if in fact, it is the tutorial after all.
JS fiddle to my code: https://jsfiddle.net/lightspeed12/69z2wepo/216279/
class ToDoItem extends React.Component { someFn = () => { let listInfo = 'Hi mom' this.props.callBackFromParent(listInfo); } render(){return <h3>Hello World</h3>} }; class ToDoList extends React.Component { constructor(props){ super(props) this.state = { listDataFromChild: null } } myCallback = (dataFromChild) => { this.setState({ listDataFromChild : dataFromChild }) } otherFn = () => { console.log(this.state.listDataFromChild, 'from state') } render(){ this.otherFn(); //calling otherFn to determine value of this.state.listDataFromChild return ( <div> <h2>Message from Child is:</h2> <ToDoItem callBackFromParent={this.myCallback} /> </div> ) } } ReactDOM.render( <ToDoList />, document.getElementById('container') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
this.someFn()
of ToDoItem
is never executed.
Try:
// To-do Item.
class ToDoItem extends React.Component {
// Render.
render = () => <h3>Hello World</h3>
// Did Mount.
componentDidMount() {
this.props.callBackFromParent('Callback Received.')
}
}
See below for a practical example of a functional prop
being passed
and executed
.
// Parent. class Parent extends React.Component { // State. state = {data: null} // Callback. callback = data => this.setState({data}) // Render. render(){ const {data} = this.state console.log('Data:', data) return ( <React.Fragment> <h2>Parent</h2> <Child callback={this.callback}/> Data: {data || 'null'} </React.Fragment> ) } } // Child. const Child = props => <button onClick={() => props.callback('Callback Received.')}>Child.</button> // Mount. ReactDOM.render(<Parent/>,document.querySelector('#root'))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>
this.someFn()
of ToDoItem is never called ,which calls the callback method to ToDoList component. Here this.someFn()
is called on a button click.
class ToDoItem extends React.Component {
someFn = () => {
let listInfo = 'Hi mom'
this.props.callBackFromParent(listInfo);
}
componentDidMount() {
this.someFn()
}
render(){return <h3>Hello World</h3>}
};
Data from child can be viewed as
render(){
return (
<div>
<h2>Message from Child is:{this.state.listDataFromChild}</h2>
<ToDoItem
callBackFromParent={this.myCallback}
/>
</div>
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.