I have a form with input fields onclick save(submit) input fields data should be displayed in next p-CodePudding

  <div className="input_container">
                    <h1>Shipping Address</h1>
                <div class="Contactus_table1_inputbox">
                   <h4>Full Name*</h4><br></br>
                   <input type="text" required="required"/>
                </div>
                <div class="Contactus_table1_inputbox">
                   <h4>Address Line*</h4><br></br>
                   <input type="text" required="required"/>
                </div>
                <div class="Contactus_table1_inputbox">
                   <h4>Zip/Postal Code*</h4><br></br>
                   <input type="text" required="required"/>
                </div>
                <div class="Contactus_table1_inputbox">
                   <h4>City*</h4><br></br>
                   <input type="text" required="required"/>
                </div>
                <div class="Contactus_table1_inputbox">
                   <h4>Country</h4><br></br>
                   <select>
                       <option className="option" value="" >India</option>
                       <option value="" >Australia</option>
                       <option value="" >France</option>
                       <option value="" >Germany</option>
                       <option value="" >Maldives</option>
                   </select>
                </div>
                <div className="container">
                    <div class="Contactus_table1_inputbox">
                        <h4>Email Address*</h4><br></br>
                        <input type="text" required="required"/>
                    </div>
                    <div id="phone_number" class="Contactus_table1_inputbox">
                        <h4>Phone Number*</h4><br></br>
                        <input type="text" required="required"/>
                    </div>
                </div>
            </div

// Think of a shopping website when you add your address to your order in payment page there will be summary of your shipping address and order id. I have to show it in another file.

<div className="payment_table2_box">
                <h1>Shipping to</h1>
                <h2>John Doe</h2>
                <p>House no. 10, Amazing Building, Beautiful street, Near Ancient Landmark</p>
                <h3>Hyderabad,123456</h3>
                <h3>Telangana</h3>
                <h3> 91 12345 78900</h3>
                <a href="/Address" id="Learn_btn" >Edit</a>
                <img id="edit_img" src="../images/edit_img.svg" alt="" />
            </div>

// After submission Data should store locally and show in placeholders of payment_table2_box div.

CodePudding user response：

You can make state global using contex api and push or redirect to the page where you want your data to be displayed and access data from context to display in the page.

CodePudding user response：

If you're using react-router, you can pass any data you want, when you push to the next page like this:

const onSubmit = async (formData) => {
  const {orderId} = await postDataToServer(formData)
  history.push("/nextPageURL", {orderId, address: formData.address})
}

& then on the next page you can access the data like this:

import {useLocation} from "react-router-dom"

const {state} = useLocation()
const {orderId, address} = state || {}