title: How to select element value without attaching state
body: <p>For some reason, the showNumber variable gets updated upon submit click, but not in <p> in return statement. Anyhow, is there a better way to write this? Keep in mind the line in <p> should not simply change with every input onChange but rather, only after a submit button click. I suppose one solution would be to select input via refs, but I'm hoping there's a better way. Please help.</p>
  
  <pre><code>function App() {
    const [number, setNumber] = useState(1);
    let showNumber = 0;
    const rerender = () =&gt; {
      showNumber = number;
    }
    const handleChange = (e) =&gt; { setNumber(e.target.value) }
    return (
        &lt;header&gt;
          &lt;input type='number' onChange={handleChange}  /&gt;
          &lt;button type='submit' onClick={rerender}&gt;submit&lt;/button&gt;
          &lt;p&gt;the number is {showNumber}&lt;/p&gt;
        &lt;/header&gt;
    );
  }
  export default App;
  </code></pre>