title: Pass data between two react components in MERN stack
body: <p>I am trying to build an E commerce web app where I handle the payments. First I need to take shipping information. I have successfully inserted data into mongo but I could not pass the data into another js right away from a single click.</p>
  <p>Here is my create address page.</p>
  <p>import React, { Component } from 'react'
  import '../App.css'
  import axios from 'axios'</p>
  <p>export default class CreateAddress extends Component {</p>
  <pre><code>constructor(props) {
      super(props);
      this.state = {
          address: &quot;&quot;,
          city: &quot;&quot;,
          phoneNo:&quot;&quot;,
          postalCode: &quot;&quot;,
          country: &quot;&quot;
      }
  }
  
  handleInputChange = (e)=&gt;{
      const {name,value} = e.target;
       this.setState({
           ...this.state,
           [name]:value
       })
  }
  
  
  
  
  onSubmit = (e)=&gt;{
      e.preventDefault();
  
      const {address,city,phoneNo,postalCode,country} = this.state;
      const data = {
          address: address,
          city: city,
          phoneNo: phoneNo,
          postalCode: postalCode,
          country: country
  
      }
  
      console.log(data)
  
      axios.post(&quot;http://localhost:5000/address/save&quot;,data).then((res)=&gt;{
          if(res.data.success){
              this.setState(
                  {address: &quot;&quot;,
                  city: &quot;&quot;,
                  phoneNo:&quot;&quot;,
                  postalCode: &quot;&quot;,
                  country: &quot;&quot;}
              )
              alert(&quot;Shipping info added successfully&quot;);
              
              
          }
      })
  }
  
  
  render() {
      return (
          &lt;div className=&quot;row wrapper&quot;&gt;
              &lt;div className=&quot;col-10 col-lg-5&quot;&gt;
                  &lt;form className=&quot;shadow-lg&quot; &gt;
                      &lt;h1 className=&quot;mb-4&quot;&gt;Shipping Info&lt;/h1&gt;
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;label htmlFor=&quot;address_field&quot;&gt;Address&lt;/label&gt;
                          &lt;input
                              type=&quot;text&quot;
                              id=&quot;address_field&quot;
                              className=&quot;form-control&quot;
                              
                              name='address'
                              value={this.state.address}
                              onChange={this.handleInputChange}
                              required
                              
                              
                          /&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;label htmlFor=&quot;city_field&quot;&gt;City&lt;/label&gt;
                          &lt;input
                              type=&quot;text&quot;
                              id=&quot;city_field&quot;
                              className=&quot;form-control&quot;
                              name='city'
                              value={this.state.city}
                              onChange={this.handleInputChange}
                              required
                              
                          /&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;label htmlFor=&quot;phone_field&quot;&gt;Phone No&lt;/label&gt;
                          &lt;input
                              type=&quot;phone&quot;
                              id=&quot;phone_field&quot;
                              className=&quot;form-control&quot;
                              name='phoneNo'
                              value={this.state.phoneNo}
                              onChange={this.handleInputChange}
                              required
                              
                          /&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;label htmlFor=&quot;postal_code_field&quot;&gt;Postal Code&lt;/label&gt;
                          &lt;input
                              type=&quot;number&quot;
                              id=&quot;postal_code_field&quot;
                              className=&quot;form-control&quot;
                              name='postalCode'
                              value={this.state.postalCode}
                              onChange={this.handleInputChange}
                              required
                              
                          /&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;label htmlFor=&quot;country_field&quot;&gt;Country&lt;/label&gt;
                          &lt;input
                              type = &quot;text&quot;
                              id=&quot;country_field&quot;
                              className=&quot;form-control&quot;
                              name='country'
                              value={this.state.country}
                              onChange={this.handleInputChange}
                              required
                              
                          /&gt;
                                  
                      &lt;/div&gt;
                      
                      &lt;button                            
                              id=&quot;shipping_btn&quot;
                              type=&quot;submit&quot;
                              className=&quot;btn btn-block py-3&quot;
                              onClick={this.onSubmit}
                          &gt;
                              &amp;nbsp;SAVE                             
                      &lt;/button&gt;
                      &lt;button id=&quot;shipping_btn&quot; type=&quot;submit&quot; className = &quot;btn btn-block py-3&quot;&gt;&lt;a href = &quot;/confirm&quot; style={{textDecoration:'none',color:'white'}}&gt;PROCEED&lt;/a&gt;&lt;/button&gt;
                      
  
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>}</p>
  <p><strong>Once I clicked the PROCEED button the data should direct into /confirm page</strong></p>