How do I transfer the value of the inputs from one page to another?-CodePudding

On one page I have two inputs and a button, after clicking on the button goes to the second page, how do I get data from the inputs on the second page?

navigate(path, { state: { input_value: value }}) ?

index.js

import './App.css';

function App() {
  return (
    <div className='App'>
      <header className='App-header'>
          <input type='text' placeholder='Name'/>
          <input type='text' placeholder='Surname'/>
          <button type='submit'>Send</button>
      </header>
    </div>
  );
}

export default App;

getData.js

export const getData = () => {
    return (
      <div>
        <h1>Name:</h1>
        <h1>Surname:</h1>
      </div>
    )
};

CodePudding user response：

So this might be Part 1 of an answer.

Taking the code you have, I've put the fields in form tag, then called handleSubmit from the built in onSubmit that is called when you click a button of type='submit' inside a form.

The values is taken from the event parameter (e) of the onSubmit (you can identify these by the 'name' attribute on the input tags) and then I am using useState hook to store the two values.

This would be where part one ends. You have the data, and you can see how it is passed to the GetDate component (the deconstructed props {name, surname} that are passed in.

From there, you should follow the documentation for your chosen router and, if you run into trouble, post the code you've tried and I can continue to help. https://v5.reactrouter.com/web/guides/quick-start

import React, { useState } from 'react';
import { GetData } from './GetData';


export function App() {
      const [theName, setTheName] = useState('');
      const [theSurname, setTheSurname] = useState('');

      const handleSubmit = (e) => {
         setTheName(e.target.name.value);
         setTheSurname(e.target.surname.value);
         e.preventDefault();
      }

      return (
        <div className='App'>
          <header className='App-header'>
            <form onSubmit={handleSubmit}>
               <input type='text' placeholder='Name' name='name'/>
               <input type='text' placeholder='Surname' name='surname'/>
               <button type='submit'>Send</button>
              </form>
          </header>
          <GetData name={theName} surname={theSurname} />
        </div>
      );
    }

export default App;

Here is a component like your getData function. I've added it to the App component, just so you can see the values being displayed, but for what you are looking for, you will need to read the documentation for react-router-dom

import React from "react";

export const GetData = ({name, surname}) => {
    return (
      <div>
        <h1>Name:{name}</h1>
        <h1>Surname:{surname}</h1>
      </div>
    )
};

CodePudding user response：

You can have a state variable in the App component and then pass the state as a prop to GetData:

import './App.css';
import { useState, useRef } from "react";

function App() {
    const nameInput = useRef(null);
    const surNameInput = useRef(null);
    const [fullName, setFullName] = useState({
        name: "",
        surName: ""
    });
    const sendData = () => {
        // you can do some input validation here
        setFullName({
            name: nameInput.current.value,
            surName: surNameInput.current.value,
        });
    }
    return (
        <div className='App'>
            <header className='App-header'>
                <input type='text' placeholder='Name' 
                    ref={nameInput}
                />
                <input type='text' placeholder='Surname'
                    ref={surNameInput}
                />
                <button onClick={sendData}>Send</button>
            </header>
            <!-- some more markup here -->
        </div>
    );
}

export default App;

Here's how you pass your data to GetData component:

<GetData fullName={fullName} />

And then in your GetData component you get the passed props and display them:

export const GetData = (fullName) => {
    return (
        <div>
            <h1>Name: {fullName.name}</h1>
            <h1>Surname: {fullName.surName}</h1>
        </div>
    )
};

You can read more about hooks like useState and useRef here