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.

Here is my create address page.

import React, { Component } from 'react' import '../App.css' import axios from 'axios'

export default class CreateAddress extends Component {

constructor(props) {
    super(props);
    this.state = {
        address: "",
        city: "",
        phoneNo:"",
        postalCode: "",
        country: ""
    }
}

handleInputChange = (e)=>{
    const {name,value} = e.target;
     this.setState({
         ...this.state,
         [name]:value
     })
}




onSubmit = (e)=>{
    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("http://localhost:5000/address/save",data).then((res)=>{
        if(res.data.success){
            this.setState(
                {address: "",
                city: "",
                phoneNo:"",
                postalCode: "",
                country: ""}
            )
            alert("Shipping info added successfully");
            
            
        }
    })
}


render() {
    return (
        <div className="row wrapper">
            <div className="col-10 col-lg-5">
                <form className="shadow-lg" >
                    <h1 className="mb-4">Shipping Info</h1>
                    <div className="form-group">
                        <label htmlFor="address_field">Address</label>
                        <input
                            type="text"
                            id="address_field"
                            className="form-control"
                            
                            name='address'
                            value={this.state.address}
                            onChange={this.handleInputChange}
                            required
                            
                            
                        />
                    </div>

                    <div className="form-group">
                        <label htmlFor="city_field">City</label>
                        <input
                            type="text"
                            id="city_field"
                            className="form-control"
                            name='city'
                            value={this.state.city}
                            onChange={this.handleInputChange}
                            required
                            
                        />
                    </div>

                    <div className="form-group">
                        <label htmlFor="phone_field">Phone No</label>
                        <input
                            type="phone"
                            id="phone_field"
                            className="form-control"
                            name='phoneNo'
                            value={this.state.phoneNo}
                            onChange={this.handleInputChange}
                            required
                            
                        />
                    </div>

                    <div className="form-group">
                        <label htmlFor="postal_code_field">Postal Code</label>
                        <input
                            type="number"
                            id="postal_code_field"
                            className="form-control"
                            name='postalCode'
                            value={this.state.postalCode}
                            onChange={this.handleInputChange}
                            required
                            
                        />
                    </div>

                    <div className="form-group">
                        <label htmlFor="country_field">Country</label>
                        <input
                            type = "text"
                            id="country_field"
                            className="form-control"
                            name='country'
                            value={this.state.country}
                            onChange={this.handleInputChange}
                            required
                            
                        />
                                
                    </div>
                    
                    <button                            
                            id="shipping_btn"
                            type="submit"
                            className="btn btn-block py-3"
                            onClick={this.onSubmit}
                        >
                            &nbsp;SAVE                             
                    </button>
                    <button id="shipping_btn" type="submit" className = "btn btn-block py-3"><a href = "/confirm" style={{textDecoration:'none',color:'white'}}>PROCEED</a></button>
                    

                </form>
            </div>
        </div>
    )
}

}

Once I clicked the PROCEED button the data should direct into /confirm page

CodePudding user response：

You can use history API to pass data as a URL and grab it into confirm page.

history.push(`/confirmPage?city=${city}&postalCode=${postalCode}`)

in confirmPage.js you will get that data as props

export default class ConfirmPage extends Component{
       render(){
         const {city, postalCode  } = this.props;

         return (
            <div>{postalCode}</div>
         )
    }

}

CodePudding user response：

You can use react-router to move between different routes in React. Also, in your code when you are sending a post request on onSubmit method, you are clearing the state information, which I think needs to be handled in the confirm page since you need the data in that page also.

Here's a codesandbox demonstrating how you can send the information to another page, using react-router. I've used the functional components, but the concepts works for the class based components also.

note: also you should use onSubmit handler of the form to submit values rather than using the onClick method of the button. Otherwise you force users to click the button to submit the form.