diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index ef7b76e04c2..dcd7b0c6d1d 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -35,6 +35,7 @@ export default function Form() { const [answer, setAnswer] = useState(''); const [error, setError] = useState(null); const [status, setStatus] = useState('typing'); + const showError = status === 'typing' && error && answer === error.failedAnswer; if (status === 'success') { return

That's right!

@@ -49,6 +50,7 @@ export default function Form() { } catch (err) { setStatus('typing'); setError(err); + setError({ message: err.message, failedAnswer: answer }); } } @@ -75,7 +77,7 @@ export default function Form() { }> Submit - {error !== null && + {showError &&

{error.message}

diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md index da559dc0fac..bca51f1a52f 100644 --- a/src/content/learn/reacting-to-input-with-state.md +++ b/src/content/learn/reacting-to-input-with-state.md @@ -57,6 +57,7 @@ async function handleFormSubmit(e) { } function handleTextareaChange() { + hide(errorMessage); if (textarea.value.length === 0) { disable(button); } else { @@ -414,6 +415,7 @@ export default function Form() { const [answer, setAnswer] = useState(''); const [error, setError] = useState(null); const [status, setStatus] = useState('typing'); + const showError = status === 'typing' && error && answer === error.failedAnswer; if (status === 'success') { return

That's right!

@@ -427,7 +429,7 @@ export default function Form() { setStatus('success'); } catch (err) { setStatus('typing'); - setError(err); + setError({ message: err.message, failedAnswer: answer }); } } @@ -454,7 +456,7 @@ export default function Form() { }> Submit - {error !== null && + {showError &&

{error.message}