React Js Login Beginner - reactjs

Question

first of all I am a very beginner at React.js. I am creating my super simple static code which has to login the user by the credentials provided in the state and redirect to homepage. But for some reason it doesn't work and doesn't redirect me to the homepage, which has the route of '/', btw my Login route is '/login'. I would appreciate any help. Here is my code:
import React from 'react';
import TextField from '#material-ui/core/TextField';
import { makeStyles } from '#material-ui/core/styles';
import Typography from '#material-ui/core/Typography';
import Container from '#material-ui/core/Container';
import Button from '#material-ui/core/Button';
import HomePage from './HomePage';
import { Redirect } from 'react-router-dom';
class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
loginData: {
username: 'test',
password: 'test'
},
errors: {}
};
this.buttonClickHandle = this.buttonClickHandle.bind(this);
this.loginHandle = this.loginHandle.bind(this);
}
loginHandle(event) {
let field = event.target.name;
let value = event.target.value;
let loginData = this.state.loginData;
loginData[field] = value;
this.setState({loginData: loginData});
}
buttonClickHandle(event) {
event.preventDefault();
if ( this.state.loginData.username === this.target.username) {
console.log("User exists. Go to the login page");
return <Redirect to="/"/>
} else {
console.log("User doesn't exists. Show error message");
}
}
render() {
return (
<div className="loginPage">
<Container maxWidth="sm">
<h2>Login</h2>
<form noValidate autoComplete="off" onChange={this.loginHandle}>
<div className="loginForm">
<TextField
required
id="outlined-required"
label="E-mail"
variant="outlined"
placeholder="Your e-mail..."
className="loginInput"
/>
<TextField
required
id="outlined-password-input"
label="Password"
type="password"
autoComplete="current-password"
variant="outlined"
placeholder="Your password..."
className="loginInput"
/>
<Button
variant="contained"
color="primary"
onClick={this.buttonClickHandle}
>
Login
</Button>
</div>
</form>
</Container>
</div>
)
}
}
export default LoginPage

Answer 1

There are some things that look off in your code.
There is no onChange prop in forms only onSubmit
The button should trigger the onSubmit function, this is done by setting the type of the button as submit
To get the input values from the form you need to put a name and get them as event.target.name.value inside the onSubmit function
here is a working example of your code
class LoginPage extends React.Component {
constructor(props) {
super(props);
this.state = {
loginData: {
username: "test",
password: "test"
},
errors: {}
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
if (
this.state.loginData.username === event.target.username.value &&
this.state.loginData.password === event.target.password.value
) {
console.log("User exists. Go to the login page");
return <Redirect to="/" />;
} else {
console.log("User doesn't exists. Show error message");
}
}
render() {
return (
<div className="loginPage">
<Container maxWidth="sm">
<h2>Login</h2>
<form noValidate autoComplete="off" onSubmit={this.handleSubmit}>
<div className="loginForm">
<TextField
required
name="username"
id="outlined-required"
label="E-mail"
variant="outlined"
placeholder="Your e-mail..."
className="loginInput"
/>
<TextField
required
name="password"
id="outlined-password-input"
label="Password"
type="password"
autoComplete="current-password"
variant="outlined"
placeholder="Your password..."
className="loginInput"
/>
<Button variant="contained" color="primary" type="submit">
Login
</Button>
</div>
</form>
</Container>
</div>
);
}
}
export default LoginPage;