I'm trying to make a login page and I want to display an error if the login fails. I call the function here: onClick={ this.login } But I want the function to display the error message without re-rendering everything. The function is inside a class
1
-
Does this answer your question? React Conditional RenderingJared Smith– Jared Smith2021-07-14 19:51:00 +00:00Commented Jul 14, 2021 at 19:51
Add a comment
|
2 Answers
Try something like this:
const [username, setUsername] = useState('');
const [error, setError] = useState('');
const handleLogin = async () => {
// request a login to your server
const res = await fetch('http://yourapi.com/login');
// determine if the request was successful
if (res.error) {
setError('Invalid input.')
}
else {
// continue
}
};
return (
<Form onSubmit={handleLogin}>
<span>{error}</span>
<input onChangeText={text => setUsername(text)}/>
</Form>
);
Comments
Found out how to do it by creating an invisible alert that's visible when I set a variable to the error
{
this.state.status &&
<Alert severity="error">
<AlertTitle>Error</AlertTitle>
{ this.state.status }
</Alert>
}