title: How to export a useState input value to another React page
body: <p>I have an <strong>input field</strong> that requires a user to enter their name.
  I am using <strong>React useState hooks</strong> as follows (not full code, just example to give you an idea):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const inputBox = ( ) =&gt; {
  const [inputText, setInputText] = useState("");
  
   const handleUserInput = (event) =&gt; {
      const newValue = event.target.value;
      setInputText(newValue);
    };
  
  return (
  
  &lt;input onChange={handleUserInput} /&gt;
  
  )};</code></pre>
  </div>
  </div>
  </p>
  <p>How do I save and export only the updated value, i.e. the name the user typed.</p>
  <p>Note I do not want to export the entire inputBox component, just the updated value so I can use it on another page without showing the physical input element on the new page.
  I do not want to display the username on another page, instead, I want to be able to import it as a string/variable and pass it to another function on the new page.</p>
  <p><strong>I have tried:</strong>
  I know how to display the user input on the same page as the physical input box because that can be done in the same inputBox component. The question is how to get just the value the user typed out of the component so I can export the inputText separately like:
  export default (inputBox)
  export { inputText };</p>
  <p>Using props doesn't seem like a solution because I don't want to display the username or the input element elsewhere, I just want the value alone.
  I have also tried saving the value by setting a variable outside this component and then updating it when the user submits their name but it didn't quite work.</p>