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;

react is for front-end development,you will not recieve form submitted data — Jatin Parmar, Jan 29 '20 at 06:20
You can save the values in the state of the Form containing component and on saving by clicking submit send those values as a object via prop — Thakur Karthik, Jan 29 '20 at 06:20
@ThakurKarthik Could you please help more regarding saving the values in state as I am new to react so I don't know much. — Kartik, Jan 29 '20 at 06:27
@Kartik you can take refrence of react setup with this todo app demo https://github.com/gaurav-kandpal/rect-todo — Gaurav Kandpal, Jan 29 '20 at 06:34
https://stackoverflow.com/questions/52238637/react-router-how-to-pass-data-between-pages-in-react https://stackoverflow.com/questions/43455200/how-to-pass-data-from-one-component-to-another-in-react-or-react-redux For passing in between components you can just refer to react docs on [props && state](https://reactjs.org/docs/components-and-props.html) — Thakur Karthik, Jan 29 '20 at 06:39

score 1 · Answer 1 · answered Jan 29 '20 at 06:45

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.

Riley Hemphill · Answer 2 · 2020-01-29T16:53:54.410

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;

Thank for the help, but it is showing some errors while executing.`./src/App.js Line 45:20: Parsing error: Unexpected token 43 | import Details from './form/form'; 44 | function App() { > 45 | const getFormData(name, number){ | ^ 46 | console.log('Name: ', name, 'Number: ', number) 47 | } 48 | return (` — Kartik, Jan 29 '20 at 07:13
My mistake. I have edited my response and it is now working as expected. It does not need to be wrapped in a form element for what you're trying to accomplish. — Riley Hemphill, Jan 29 '20 at 16:55

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

2 Answers2

Linked