score:0
import { withrouter } from 'react-router';
class login extends react.component {
state = {
email: '',
password: '',
errors: {},
redirect: false
}
validateform = () => {
let errors = {};
let formisvalid = true;
if(!this.state.email) {
formisvalid = false;
errors['email'] = 'please enter email to continue';
}
if(!this.state.password) {
formisvalid = false;
errors['password'] = 'please enter password to continue';
}
this.setstate({
errors: errors
})
return formisvalid;
}
handlechange = (event) => {
this.setstate({
[event.target.id]: event.target.value
});
}
handlesubmit = (event) => {
event.preventdefault();
// console.log(this.state);
if(this.validateform()) {
const logindata = {
email: this.state.email,
password: this.state.password
}
axios
.post('/users.json', logindata)
.then(response => {
this.props.history.push("/dashboard");
console.log(response.data);
})
.catch(error => {
console.log(error);
})
}
}
render() {
return (
<div classname="container">
<form onsubmit={this.handlesubmit} classname="white">
<h5 classname="grey-text text-darken-3">login</h5>
<div classname="input-field">
<label htmlfor="email">email</label>
<input type="email" id="email" onchange={this.handlechange} />
<p>{this.state.errors.email}</p>
</div>
<div classname="input-field">
<label htmlfor="password">password</label>
<input type="password" id="password" onchange={this.handlechange} />
<p>{this.state.errors.password}</p>
</div>
<div classname="input-field">
<button onclick={this.redirecthandler} classname="btn btn-primary">login</button>
</div>
</form>
</div>
)
}
}
export default withrouter(login);
score:0
have some complain about your code.
- first: for form validation and handling you dont need to use state, there is a library called formik which will help you a lot with this.
- second: if you are using redux to check user is logged in or
not you need to create a private route for routes which cannot be
accessible for public like here
dashboard
component. - third: to use history you need to wrap your
component inside
withrouter
hoc which will pass route props to your component so you can usehistory
or if your are using functional component you can useusehistory()
hook.
Source: stackoverflow.com
Related Query
- Redirection to dashboard after login in react
- Forcing login in react after 401 from backend
- React Navigation 5, block back navigation after login
- react native and parse, currentuser is null after login and cmd+R
- Redirect to Home after Login on React Redux Application
- Using React Router to Redirect to next page after successful login
- Update navbar after success login or logout redirection
- React google Login firing error on render and after sign in
- React change login link to logout after login
- Reactjs redirect to dashboard page after successful login with react-router-dom (v6)
- React Router v4 login check after hitting Refresh on browser
- React router briefly shows the login screen and then redirects to dashboard if user is logged in
- how to 'redirect' with react after login with passport.js?
- Conditionally check value from context and then navigate after login in the same function call in React
- How do i make a react app redirect to the login page after registration?
- React Facebook Login - Hide Button after Login
- Redirect user after login with react redux?
- Make a new login after the first failure in a React application
- Need browsers refresh to get data displayed after user Login in react using redux
- react router v6 won't switch to Home Page after Login Page: Warning: Can't perform a React state update on an unmounted component
- React not redirecting after first login. But redirects after forcefully redirecting and doing a login action again
- react redirect to another page after login
- React - Routing & Redirect after login to attempted page
- react-router-Dom: Blank page after redirect multiple user on login in React
- Load login page without Sidebar, Navbar and Dashboard in React
- Close modal after login React
- React Redux - get user after login and auth token
- React Router - Structure NavBar Before Login and after Login
- React re-render after login -- and after an asynchronous call
- Redirect user to a page after succesful login in React app
More Query from same tag
- Problem to request data from express server with Axios
- In javascript, is it possible to shorthand put all imports in an array for export?
- React js - div onClick link to page
- React Functional component html5 video player capture events
- Material UI auto complete value and onChange
- How to save and fetch image into/from MySQL database using spring rest and reactjs
- typescript doesn't render dynamic url on reac-router-dom
- How can I match if the current route matches a pattern in React Router Dom v6?
- Reactjs form with multiple inputs and state change
- Updating state as an array of objects
- Is there a function to that creates a custom block inside my gutenberg block?
- Cannot upload a file with graphql-upload and formik
- React: How to make collapsible elements that are fast?
- How to solve react webpack problem with npm-start
- React hook form - all fields are mandatory if any of the field is filled else optional
- how to empty value on unchecking checkbox in reactjs?
- How to change the input width inside a grid?
- is there anyway i can define state in this case
- Combining graphs in highcharts
- How to return default error if observable next is undefined
- How to reset the state to it's initial state in redux store?
- How do I display a 404 error to every route that isn't specified?
- Set scroll mode conditionally with react-full-page
- media query not working int the below code - Recact js
- How to apply fontSize to CardHeader title in MUI?
- NavLink not populating active class for nested route
- setState is not updating after clicking on image
- How to use a constant in map return function ReactJS
- Error on running build command through npm run for reactjs project
- frame rate in react-webcam