title: How do I make a form submission save data in a useState hook variable?
body: <p>I'm new to React and JavaScript; currently looking at hooks. I have these two React functional components in an application I generated using Create React App:</p>
  
  <p><code>App.js</code></p>
  
  <pre><code>import React, { useState} from 'react';
  import NameTaker from './components/NameTaker'
  
  export default function App() {
    const [name, setName] = useState(null);
  
    if (name == null) {
      return &lt;NameTaker onSubmit={submitHandler} /&gt;
    }
    return &lt;p&gt;Your name is: {name}&lt;/p&gt;
  
    function submitHandler(e) {
      setName(e.value)
    }
  }
  </code></pre>
  
  <p>and <code>NameTaker.js</code></p>
  
  <pre><code>import React from 'react';
  
  export default function NameTaker(props) {
    return(
      &lt;div&gt;
        &lt;p&gt;Please enter your name.&lt;/p&gt;
        &lt;form onSubmit={props.onSubmit}&gt;
          &lt;label&gt;
            Name:
            &lt;input type='text' name='name' /&gt;
          &lt;/label&gt;
          &lt;button type='submit'&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>This is the render statement in <code>index.js</code>:</p>
  
  <pre><code>ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>The application runs ok locally and the all the elements in <code>NameTaker.js</code> display correctly on the webpage.</p>
  
  <p>When I fill out a name and click the button, I expect it to execute the callback function, store the name string inside the <code>name</code> variable, then when the <code>App</code> function component re-renders, the new name should be stored and <code>&lt;p&gt;Your name is: {name}&lt;/p&gt;</code> should get returned instead of the form when the conditional statement is hit. But instead, when I click the button, the URL just changes to add <code>/?name=whatever</code> on the end, and the form remains on the page.</p>
  
  <p>I tried modifying the program so that it gives the callback to the button instead of the form like this:
  <code>&lt;button onClick={props.onSubmit}&gt;Submit&lt;/button&gt;</code>
  but there is not change in behaviour.</p>
  
  <p>I tried adding <code>e.preventDefault();</code> before and then after the <code>setName</code> call in my callback function but that didn't work either.</p>
  
  <p>The exact behaviour I'm looking for is:  <em>when name is <code>null</code>, return component displaying a form/input box, use callback to save the submitted name in state of the parent component, re-render parent component, but because state is no longer <code>null</code> return the paragraph displaying name instead of the form component.</em></p>
  
  <p>Can anyone show me how to do that please?</p>