How to select element value without attaching state - reactjs

Question

For some reason, the showNumber variable gets updated upon submit click, but not in in return statement. Anyhow, is there a better way to write this? Keep in mind the line in 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.
function App() {
const [number, setNumber] = useState(1);
let showNumber = 0;
const rerender = () => {
showNumber = number;
}
const handleChange = (e) => { setNumber(e.target.value) }
return (
<header>
<input type='number' onChange={handleChange} />
<button type='submit' onClick={rerender}>submit</button>
<p>the number is {showNumber}</p>
</header>
);
}
export default App;

Answer 1

By Wrapping the form tag you can achieve, so when you click on the submit only it will get the form values and you can fetch the values by using name attribute
Sample Code
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
const [number, setNumber] = useState(1);
const rerender = e => {
e.preventDefault();
const data = new FormData(e.target);
setNumber(data.get("number"));
};
return (
<header>
<form onSubmit={rerender}>
<input type="number" name="number" />
<button>Submit</button>
</form>
<p>the number is {number}</p>
</header>
);
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Working codesandbox