How to display the information submitted in the html form on another page using react js?

Question

I want to show all the details filled in the html form on another page using react js. I have created the html form which is the landing page. And after clicking on submit all the information should be displayed on another page.

My form.js page for creating the html form

import React, { component } from 'react';

var details = () => {
    return(
        <div>
            <form>
                Name: {" "}
                <input type="text" placeholder="Enter name" /><br />
                Contact No.: {" "}
                <input type="number" placeholder="Enter contact number" />
                <br />
                <input type="submit" value="submit"/>
            </form>
        </div>
    );
}


export default details;

My app.js page

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Details from './form/form';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Details />
      </header>
    </div>
  );
}

export default App;

Answer 1

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;

Answer 2

The data which you'll store in react state will be in browser memory and on refresh you'll lose that data.

In case, If you want functionality like the preview on form submit then you can store data in state and show/hide the preview on form submit.

So, Basically you can use state or some third party state management library to store the data. Here is a basic example of how you can achieve in the same details component.

import React, { useState } from 'react';

const Details = () => {
  const [name, setName] = useState('');
  const [number, setNumber] = useState(null);
  const [showPreview, setShowPreview] = useState(false);
  return(
    <div>
      {!showPreview && <form onSubmit={e => e.preventDefault()}>
        Name: {" "}
        <input type="text" placeholder="Enter name" onChange={e => setName(e.target.value)} /><br />
        Contact No.: {" "}
        <input type="number" placeholder="Enter contact number" onChange={e => setNumber(e.target.value)} />
        <br />
        <input type="button" value="submit" onClick={() => setShowPreview(!showPreview)}/>
      </form>}
      {showPreview && (<div>
        <p>{name}</p>
        <p>{number}</p>
      </div>)}
    </div>
  );
}


export default Details;

Again, This answer is based on lots of assumptions. Maybe we need some more details in the question to have a precise answer.

In case if you want to display the same data on any other page then you can use Redux. Which can store the data in the redux store and you display the same data on another page.