How can i get data or pass a data from one page to another after submitting a form in reactjs

chrannbon

i am new to Reactjs, i'm almost done with my project. i've been doing a hotel booking system. but i have a problem with my checkout page. after i submitted a form from booking page it will redirected to checking out page. now how can i be able to get the reservation data from query? i'm using a param in my other pages but how can i pass an id when it was redirected and no href to pass the id. can anyone help me with this, i'm runnung out of time and i'm still stuck here. thank you in advance.

here is my CheckOutPage:

   const CheckoutPage = (props) => {
   const [isRedirected, setIsRedirected] = useState(false)

if (isRedirected) {
    return <Redirect to='/transaction'/>
}

return (
    <ConfirmationMessage setIsRedirected={setIsRedirected}/>
)

}

const ConfirmationMessage = ({setIsRedirected}) => {

const { user } = useContext(UserContext)

const [name, setName] = useState('')
const [roomPrice, setRoomPrice] = useState(0)

let options = {
    headers: {
        Authorization: 'Bearer ' + user.token
    }
}

useEffect(() => {
    GQLClient(options).request(Query.getUser).then((data) => {
        setName(data.getUser.name)
    })

    GQLClient({}).request(Query.getRooms).then((data) => {

        setRoomPrice(data.getRoom.roomPrice)
    })

}, [])

return(
    <Container>
        <Row> .....

here's in my schema.js

 type Query {
    getReservationForm: ReservationForm
 }

 type ReservationForm {
    id: ID!
    startDate: String!
    endDate: String!
    name: String!
    email: String!
    contactDetail: String!
    roomNumber: String!
    roomPrice: Float!
}

in my resolvers

 Query: {
    getReservationForm: (parent, args) => {
        return ReservationForm.findById(args.id)
    }
},

and in my query

 getReservationForm: `
    query (
        $id: String!
    ) {
        getReservationForm (
            id: $id
        ) {
            startDate
            endDate
            name
            email
            contactDetail
            roomNumber
            roomPrice
        }
    }
HermitCrab

If you are using Redirect, you can actually pass some data:

<Redirect to={{
            pathname: '/checkout',
            state: { first: 'James', last: 'Bond', ... }
        }}
/>

You can then access this data in your CheckoutPage:

console.log(this.props.location.state);

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How To Pass Form Data from One Page To Another using FlaskApp

How to pass form fields from one page to another page in ReactJS?

How can I pass data from one component to another for edit form?

How can I pass form data from one html file to another without JS/PHP?

How can I pass data from a TextFieldInput to another Page with Provider

How can I empty this AngularJS form after submitting the data?

How can I get a data from one html form and display it on another?

How can I simply pass data from a component one page to a component on another page in React/Next.js?

How can I get additional data from one promise to another?

How to pass data from one page to another page in html?

How to pass data from one page to another page html

How to pass data from one page to another page in python tkinter?

I use java Servlets and cannot redirect to another page after submitting form and sending data in JSON format

How to pass data from one component to another via a function in ReactJS?

How to pass data from one component to another ReactJS

ReactJs: How to pass data from one component to another?

Reactjs- How do I pass data or a variable from one component to another

How do I pass useState data from one component file to another ReactJS

ReactJs - how can I pass data inside one Component

Pass on the form data from one component to another

How to pass model class data from one page another in iOS?

How to pass data from one page to another for Navigation in Ionic 2

How to pass data from one html page to another?

How to pass data from one page to another in prerendered app

Pass data from one page to another in Flutter

Ways to pass data from one page to another

How to get data from one Page in another page in php?

how to send form data from one page to another using django

How do I scrape data from a web page that refreshes after submitting data via selenium and python?

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive