将数据从子组件传递到父组件

Question

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> 

Answer 1

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> 

Answer 2

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>
        )
      }