DOM does not update on value change - reactjs

Question

I am trying to set up a simple form using a function component using a next.js project:
const Form = () => {
let error = false
const handleNameSubmit = (e) => {
e.preventDefault()
const name = e.target.name.value.trim()
if(!! name.length) {
error = false
} else {
error = 'Please enter your name'
}
}
return (
<>
<form onSubmit={handleNameSubmit}>
<h1>I’d like to know how to address you,
please type in your name</h1>
<input type="text" name="name" placeholder="Your name"/>
{!!error && (<p>{error}</p>)}
<button type="submit">Next</button>
</form>
</>
)
}
I am doing some trivial validation i.e. checking if any value is entered in the name input and displaying an error, if the field is empty.
However, when I set the value of error on page load to be something, it shows in the DOM, but if I manipulate it later, the DOM does not update. I am new to next.js.

Answer 1

You have to use state variable to achieved your goal. Simply convert error in state variable and it will work.
const Form = () => {
const [error, setError] = useState(false);
const handleNameSubmit = (e) => {
e.preventDefault();
const name = e.target.name.value.trim();
setError(name.length ? false : 'Please enter your name');
}
return (
<>
<form onSubmit={handleNameSubmit}>
<h1>I’d like to know how to address you,
please type in your name</h1>
<input type="text" name="name" placeholder="Your name" />
<button type="submit">Next</button>
{error && <p>{error}</p>}
</form>
</>
)
}
I have created small demo for you.
https://stackblitz.com/edit/react-7kat5c
Hope this will help you!