Form Data In React js

Question

How to Show Form Submitted Data on Another Page? I am trying to get data on another page but I am not able to get data on another page of a submitted form.

Answer 1

Here's the answer: How to display the information submitted in the html form on another page using react js?, below is a copied answer from this link:

First, on the app we want to create a function that can receive the data, then send it to the component as a prop:

import React from 'react';
import Details from './form';
function App() {
    const getFormData = function (name, number) {
        console.log('Name: ', name, 'Number: ', number)
    }
    return (
        <div className="App">
            <header className="App-header">
                <Details sendFormData={getFormData} />
            </header>
        </div>
    );
}

export default App

Then, inside the component you want to set each input to update their state as they change. When you click submit, you pass the state to the up to the app components getFormData function.

import React, { useState } from 'react';

const Details = (props) => {
    const [userName, setName] = useState('');
    const [userNumber, setNumber] = useState('');
    const handleSubmit = () => {
        props.sendFormData(userName, userNumber)
    }

    return (
        <div>
            Name: {" "}
            <input type="text" placeholder="Enter name"
                onChange={event => setName(event.target.value)} /><br />
            Contact No.: {" "}
            <input type="number" placeholder="Enter contact number"
                onChange={event => setNumber(event.target.value)} />
            <br />
            <button onClick={() => handleSubmit()} >Submit</button>
        </div>
    );
}

export default Details;