"Now after this, the next step is communicating with the parent component. Currently, there is no way that our child component can communicate with props. We want to communicate with the parent component as we want to send the selected books by the user to the parent component. The easiest way for a child to communicate with the parent is via props." Mike explained.

"But props are generally the attributes or properties that are sent to a child, right? How can a child communicate with the parent using them?" Shawn asked.

"Remember the {} syntax. We can pass any valid expression as prop. We can pass a function callback as prop to a child component. A child can call it to update the state of the parent. Let's update our BookStore component now." Mike explained.

// src/BookStore.js

……
// Updating BookStore component

  updateFormData(formData) {
    console.log(formData);
  },
  
  render() {
    switch (this.state.currentStep) {
      case 1:
        return <BookList 
                 updateFormData={this.updateFormData} />;
      case 2:
        return <ShippingDetails  
                 updateFormData={this.updateFormData} />;
      case 3:
        return <DeliveryDetails 
                 updateFormData={this.updateFormData} />;
    }
  }
……

});

"We pass the updateFormData function as a prop to all the child components. This function will take care of updating the form data. We will also need to update BookList in order to use it."

// src/BookStore.js
// Updating BookList component

……
  handleSubmit(event) {
    event.preventDefault();

    this.props.updateFormData({ selectedBooks: 
                                this.state.selectedBooks });
  }
  ……
}); 

"The BookList component now calls the updateFormData function and passes the currently selected books to it, whenever a user submits the first form," explained Mike.

"Therefore, every form will send its data to the parent component and we will use the complete data for final submission, right?" Shawn asked.

"Exactly. We will need a way to store the incoming data in the parent component though."

// src/BookStore.js
// Updating BookStore component

var BookStore = React.createClass({
  getInitialState() {
    return ({ currentStep: 1, formValues: {} });
  },

  updateFormData(formData) {
    var formValues = Object.assign({}, this.state.formValues, formData);
    this.setState({formValues: formValues});  
  },

  render() {
    switch (this.state.currentStep) {
      case 1:
        return <BookList updateFormData={this.updateFormData} />;
      case 2:
        return <ShippingDetails updateFormData={this.updateFormData} />;
      case 3:
        return <DeliveryDetails updateFormData={this.updateFormData} />;
    }
  }
});

"We added state to store formValues. Whenever the user submits the form, the child form will call the parent's updateFormData function. This function will merge the current data stored in the parent's formValues with incoming formData and reset the state to the new formValues. In this case, we will get selectedBooks in the formValues object, as follows:" said Mike.

 { selectedBooks: ['Zero to One', 'Monk who sold his Ferrary'] }

"Note that, we are making use of another ES6 method—Object.assign. The Object.assign() method is used to copy the values of all the enumerable properties from one or more source objects to a target object."

"In our case, the use of Object.assign will merge the current state of form values with the new form values that are changed after some user interaction. We will then use this updated data to update the state of the component. We are using Object.assign instead of directly mutating the state of the component. We will cover why this is better than directly mutating the state of the component in the following chapters."

var formValues = Object.assign({}, this.state.formValues, formData);

"Makes sense. This takes care of updating the form data. Now, how will we go to the next step?" Shawn asked.

"That's simple. Whenever we update the form data, we also need to update the currentStep method of the BookStore component. Can you give it a try?" Mike asked.

// src/BookStore.js
// Updating BookStore component

var BookStore = React.createClass({
  updateFormData(formData) {
    var formValues = Object.assign({}, this.state.formValues, formData);
    var nextStep = this.state.currentStep + 1;
    this.setState({currentStep: nextStep, formValues: formValues});
    console.log(formData);
  },

  render() {
    switch (this.state.currentStep) {
      case 1:
        return <BookList updateFormData={this.updateFormData} />;
      case 2:
        return <ShippingDetails updateFormData={this.updateFormData} />;
      case 3:
        return <DeliveryDetails updateFormData={this.updateFormData} />;
    }
  }
});

"Perfect. You have updated the step by 1 in the updateFormData callback. This will take the user to the next step." Mike.