I made a login form with Redux Form and when I submit the form I make a POST request to validate the Email and Password. If the combination is incorrect I throw a new SubmissionError but this SubmissionError gets removed immediately by an UPDATE_SYNC_ERRORS call by Redux Form.
My LoginForm component:
const LoginForm = ({ error, handleSubmit, authenticateUser }) => (
<form onSubmit={handleSubmit(authenticateUser)}>
<Field
name="email"
component={RenderField}
type="email"
label="email"
validate={[required, minLength(3), email]}
/>
<Field
name="password"
component={RenderField}
type="password"
label="password"
validate={[required]}
/>
{error && <strong>{error}</strong>}
<div className="login__action__container">
<button className="login__submit" type="submit">Submit</button>
<NavLink className="login__link" to="/register">Or register</NavLink>
</div>
</form>
)
The AuthenticateUser action:
export const authenticateUser = values => dispatch => {
return axios.post('./api/user/login', {
email: values.email,
password: values.password
})
.then((response) => {
// Does stuff
})
.catch((error) => {
throw new SubmissionError({_error: error.response.data.error})
})
Image showcasing the Redux State and actions
I've been bug fixing for the last few hours but still no result. Anyone with the golden tip? Thanks in advance!
Related
In my react typescript app - I have a login component and a handleLoginRequest function which sets the userMessage value:
function Login() {
let [userMessage, setUserMessage] = useState("");
return (
<form className="form-inline" onSubmit={(e) => {
setUserMessage(handleLoginRequest(e))
}} >
<label className="mr-sm-2">Email address:</label>
<input type="email" className="form-control mb-2 mr-sm-2" placeholder="Enter email" id="email" />
<label className="mr-sm-2">Password:</label>
<input type="password" className="form-control mb-2 mr-sm-2" placeholder="Enter password" id="password" />
<button type="submit" className="btn btn-primary mb-2">Submit</button>
{userMessage}
</form>
);
}
Update: handleLoginRequest is a API request
const handleLoginRequest = (event: any): any => {
event.preventDefault();
const data = {
email: event.target.email.value,
password: event.target.password.value
};
axios.post(`${process.env.REACT_APP_HTTP_PROXY}/api/v1/login`, data)
.then(res => {
console.log(res.data);
return res.data;
})
.catch(err => {
console.log(err);
return err.message;
});
}
Expected behavior:
When the form is submitted, the function setUserMessage(handleLoginRequest(e)) is called. I expect that it update the value of userMessage to login request received.
Actual result:
No change in the value of userMessage
What is the fix here?
Updated answer per the question modification
The issue is stemming from the fact you're trying to setState based on a axios post request. Axios requests are asynchronous, meaning they will happen out of order with the program control flow. Therefore, to solve this issue, it is important you only make a call to setUserMessage when the request is complete.
Example Code:
axios.post(`${process.env.REACT_APP_HTTP_PROXY}/api/v1/login`, data)
.then(res => {
setUserMessage(res.data);
})
.catch(err => {
// Do Something with error response
setUserMessage("Error: Something with the request went wrong.");
});
I will link a codesandbox to demonstrate:
https://codesandbox.io/s/focused-leakey-0jer4
I'm working on an app that uses strapi as the backenbd and react as the front
I'm using react hooks to build a login form. However my form submit does not call the submit handler
import React, { useState } from "react";
const Login = () => {
const [state, setState] = React.useState({ identifier: '', password: '' });
const handleChange = ({ target: { name, value } }) =>
setState(prevState => ({ ...prevState, [name]: value }));
const handleSubmit = async() => {
console.log('handleSubmit')
try {
const response = await fetch('./auth/local', { method: 'POST', body: state})
console.log(response)
} catch(err) {
console.log(err)
}
}
return (
<div>
<label htmlForm="identifier">identifier</label>
<input
id="identifier"
name="identifier"
onChange={handleChange}
value={state.identifier}
/>
<label htmlForm="password">password</label>
<input
id="password"
name="password"
onChange={handleChange}
value={state.password}
/>
<button onClick={() => handleSubmit}></button>
</div>
);
};
export default Login;
the handleSubmit function is never called.
You'd need to trigger the submit.
You can add a button to trigger a submit as shown below.
<div>
<form onSubmit={handleSubmit}>
<label htmlForm="identifier">identifier</label>
<input
id="identifier"
name="identifier"
onChange={handleChange}
value={state.identifier}
/>
<label htmlForm="password">password</label>
<input
id="password"
name="password"
onChange={handleChange}
value={state.password}
/>
👇
<button type="submit">Submit</button>
</form>
</div>
You can try it out out this Sandbox.
<div>
<label htmlForm="identifier">identifier</label>
<input
id="identifier"
name="identifier"
onChange={handleChange}
value={state.identifier}
/>
<label htmlForm="password">password</label>
<input
id="password"
name="password"
onChange={handleChange}
value={state.password}
/>
<button onClick={handleSubmit}></button>
</div>
I have a multi steps form in which i have used a Formik and Yup libraries.
But the validation that i am using of yup library is not working at all. In React debugger tool i am getting it's value as empty. So, whatever i write in the input field it validates with "Required" message as it's value is empty.
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
let accountInfoSchema = Yup.object().shape({
name: Yup.string()
.max(20, 'Too Long!')
.required('Name is Required'),
});
class AccountInfo extends Component {
handleChange = event => {
this.setState({
userAccountData: Object.assign(
{},
this.state.userAccountData,
{ [event.target.name]: event.target.value }
),
})
}
AccountInfoView = () => {
return (
<section className="form">
<React.Fragment>
<Formik
initialValues={{name:'' }}
validationSchema={accountInfoSchema}
render={() => {
return(
<Form onSubmit={this.handleSubmit}>
{this.Step1()}
{this.Step2()}
{this.Step3()}
<li className="stb_btn half">
<div className="custom_group">
{this.previousButton()}
</div>
</li>
<li className="stb_btn half">
<div className="custom_group">
{this.nextButton()}
</div>
</li>
</Form>
);
}}
/>
</React.Fragment>
</div>
</section>
)
}
Step1 = () => {
return(
<li>
<div className="custom_group">
<Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} />
<label className="label_two">Name</label>
<ErrorMessage name="name" />
</div>
</li>
)
}
render() {
return (
<div>{this.AccountInfoView()}</div>
)
}
}
please review the react console response for the value as empty.
The reason why it isn't validating is because you are passing to the Field this.state.userAccountData['name'] and onChange={this.handleChange}.
Formik already have a state to store all of the data from your form, you don't need to keep it in the components state.
When you add onChange={this.handleChange} to the field, you change the component's state, but don't change the Formik's state, this is why the validation isn't triggering.
I'm not sure why you are keeping the name in the state, but if you don't have any reason why these are unecessary.
// formik already handle the state for you inside `values`
handleChange = event => {
this.setState({
userAccountData: Object.assign(
{},
this.state.userAccountData,
{ [event.target.name]: event.target.value }
),
})
}
// Formik already handles the value and the onChange of the input
<Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} />
The only thing you need is to set the field's name prop, so it matches the validation.
// this is enough
<Field type="text" name="name" className="trans text_input" placeholder="Enter your name" />
I'm working to enable server-side validation with redux-form, where when a user submits the SignUp form, if the server responds with an error, the form shows the error... In this case the error has a status of 422 from the server and is responding w {"errors":{"email":["has already been taken"]}}
While the form is submitting fine, I can't get the SubmissionError to display on the form. I'm getting the following error in the JS console:
Unhandled rejection SubmissionError: Submit Validation Failed
What am I doing wrong with redux-form submit validation handling? Thanks
SignUpForm
const ensureValid = response => {
if (response.status === 422) {
return response.json().then(({errors}) => {
throw new SubmissionError({
email: 'Already in Use',
_error: 'failed!',
});
});
}
return response;
};
class SignUp extends React.Component {
handleSubmit(data) {
const request = new Request('http://localhost:4400/auth/', {
method: 'POST',
headers: new Headers({
'Accept' : 'application/json',
'Content-Type' : 'application/json',
}),
body: JSON.stringify({ user: data })
});
fetch(request).then(ensureValid).then(response => {
return tryLogin(response, this.props.dispatch);
});
}
render() {
const { error, handleSubmit, pristine, reset, submitting } = this.props;
return (
<div className="container">
<div className="row justify-content-md-center">
<div className="col-6">
<h1>Sign Up - it's free.</h1>
<form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
<Field
name="first_name"
type="text"
component={renderField}
label="First Name"
/>
<Field
name="last_name"
type="text"
component={renderField}
label="Last Name"
/>
<Field
name="email"
type="text"
component={renderField}
label="Email"
/>
<Field
name="password"
type="password"
component={renderField}
label="Password"
/>
<button type="submit" disabled={submitting}>Submit</button>
{error && <strong>{error}</strong>}
</form>
</div>
</div>
</div>
);
}
}
// Decorate the form component
SignUp = reduxForm({
form: 'SignUp' // a unique name for this form
})(SignUp);
const mapStateToProps = state => {
return {
};
};
const mapDispatchToProps = (dispatch) => bindActionCreators({
dispatch
}, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(SignUp);
Turns out I needed to update:
BEFORE:
fetch(request)...
AFTER:
return fetch(request) ...
I am new to react and redux technology. now started building an application that contains several redux forms. We want to submit simple form with values.
For ex: login form
Username : text input field
Password: text input field
Submit button
After entering values in fields and click on submit button i want to get the username and password field values in object or json data .. so that I can store it to my server with POST method.
Right now we are using handleSubmit(), but data is not coming as object
1 - The best practice to deal with input values are making them controlled. Which means :
Instead of
<input type='password' />
You do :
<input
type='password'
value={password}
onChange={ event => myInputHandler( event.target.value ) }
/>
The value might come from your state, redux state or as a props etc.
Your handler function differs according to where you store it.
I will give you an example with react state :
<input
type='password'
value={this.state.password}
onChange={ event => this.setState({ password : event.target.value }) }
/>
So whenever someone types, your onChange handler will be called, so that your react state will update with the input ( event.target.value ).
2 - If you need these values when a user submits, then you need to wrap these input fields within a form element and attach a onSubmit handler.
onSubmitHandler( event ){
event.preventDefault()
let password = this.state.password
// use password or other input fields, send to server etc.
}
<form onSubmit={ event => this.onSubmitHandler(event) }>
<input
type='password'
value={this.state.password}
onChange={ event => this.setState({ password : event.target.value }) }
/>
</form>
Hope you get what you need.
If you are using redux to store state then use redux-from then use redux from
import React from 'react'
import {Field, reduxForm} from 'redux-form'
const SimpleForm = props => {
const {handleSubmit, submitting} = props return (
<form onSubmit={handleSubmit(e=>console.log('your form detail here', e))}>
<div>
<label>First Name</label>
<div>
<Field name="firstName" component="input" type="text" placeholder="First Name" />
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field name="lastName" component="input" type="text" placeholder="Last Name" />
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
</div>
</form>
) }
export default reduxForm({ form: 'simple'})(SimpleForm)
Go here for more detail
https://redux-form.com
I put the name of the input as the key that I want to use.
Then each time the input changes I destructure the event passed to the onChange function, and I use the name,value to update the state.
On form submit make sure to use preventDefault(); in order to avoid the page refreshing.
import React, { Component } from 'react'
class FormExample extends Component {
constructor(props){
super(props)
this.state = {
formData: {}
}
}
handleInputChange = ({ target: { name,value } }) => {
this.setState({
formData: {
...this.state.formData,
[name]: value
}
})
}
handleFormSubmit = e => {
e.preventDefault()
// This is your object
console.log(this.state.formData)
}
render() {
return(
<div>
<Form
handleSubmit={this.handleFormSubmit}
handleChange={this.handleInputChange}
/>
</div>
)
}
}
const Form = ({ handleSubmit, handleChange }) => (
<form onSubmit={handleSubmit}>
<input onChange={handleChange} name="username" type="text" placeholder="Username" />
<input onChange={handleChange} name="password" type="password" placeholder="Password" />
<button>Submit</button>
</form>
)
export default FormExample