Submit button takes 2 clicks to call function in React
0
When i'm clicking submit button it requires to clicks to properly fire off the function. I didn't have problem before implementing if statements. Does it have something with fact that i have 2 if statements inside and after each click it checks only 1 if statement?
onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}
javascript reactjs if-statement state form-submit
asked Nov 20 '18 at 18:52
D.WasilewskiD.Wasilewski
226
add a comment |
0
When i'm clicking submit button it requires to clicks to properly fire off the function. I didn't have problem before implementing if statements. Does it have something with fact that i have 2 if statements inside and after each click it checks only 1 if statement?
onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}
javascript reactjs if-statement state form-submit
asked Nov 20 '18 at 18:52
D.WasilewskiD.Wasilewski
226
this.setState is an asyc function, so beware of its side-effects
– Kumar Nitesh
Nov 20 '18 at 19:22
add a comment |
0
0
0
When i'm clicking submit button it requires to clicks to properly fire off the function. I didn't have problem before implementing if statements. Does it have something with fact that i have 2 if statements inside and after each click it checks only 1 if statement?
onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}
javascript reactjs if-statement state form-submit
asked Nov 20 '18 at 18:52
D.WasilewskiD.Wasilewski
226
When i'm clicking submit button it requires to clicks to properly fire off the function. I didn't have problem before implementing if statements. Does it have something with fact that i have 2 if statements inside and after each click it checks only 1 if statement?
onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}
javascript reactjs if-statement state form-submit
javascript reactjs if-statement state form-submit
asked Nov 20 '18 at 18:52
D.WasilewskiD.Wasilewski
226
asked Nov 20 '18 at 18:52
D.WasilewskiD.Wasilewski
226
asked Nov 20 '18 at 18:52
D.WasilewskiD.Wasilewski
226
asked Nov 20 '18 at 18:52
D.WasilewskiD.Wasilewski
226
asked Nov 20 '18 at 18:52
D.WasilewskiD.Wasilewski
226
226
this.setState is an asyc function, so beware of its side-effects
– Kumar Nitesh
Nov 20 '18 at 19:22
add a comment |
this.setState is an asyc function, so beware of its side-effects
– Kumar Nitesh
Nov 20 '18 at 19:22
this.setState is an asyc function, so beware of its side-effects
– Kumar Nitesh
Nov 20 '18 at 19:22
this.setState is an asyc function, so beware of its side-effects
– Kumar Nitesh
Nov 20 '18 at 19:22
add a comment |
3 Answers
3
active
oldest
votes
0
You also shouldn't need to have two setState calls directly after each other. Make them in one setState instead like so:
this.setState({
validation: false,
errorMessage: 'Please enter correct email adress',
)}
answered Nov 20 '18 at 19:08
weibenfalkweibenfalk
54617
add a comment |
0
I think you are using a stale value of validation in the statement if(validation). Can you please try something like:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
const {validation} = this.state // read correct validation.. not something that was previously set
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}answered Nov 20 '18 at 19:24
shmitshmit
581311
add a comment |
0
Fixed this issue, they key to success was moving my if(validation) statement body to callback function of setState.
Here is working code:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true}, () => {
const newEvent = {
firstName: firstName,
lastName: lastName,
email: email,
eventDate: eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
})
})
} else {
this.setState({validation: false, errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false, errorMessage: 'Please fill in all fields properly'})
}
e.preventDefault();
}
answered Nov 20 '18 at 19:39
D.WasilewskiD.Wasilewski
226
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399658%2fsubmit-button-takes-2-clicks-to-call-function-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You also shouldn't need to have two setState calls directly after each other. Make them in one setState instead like so:
this.setState({
validation: false,
errorMessage: 'Please enter correct email adress',
)}
answered Nov 20 '18 at 19:08
weibenfalkweibenfalk
54617
add a comment |
0
You also shouldn't need to have two setState calls directly after each other. Make them in one setState instead like so:
this.setState({
validation: false,
errorMessage: 'Please enter correct email adress',
)}
answered Nov 20 '18 at 19:08
weibenfalkweibenfalk
54617
add a comment |
0
0
0
You also shouldn't need to have two setState calls directly after each other. Make them in one setState instead like so:
this.setState({
validation: false,
errorMessage: 'Please enter correct email adress',
)}
answered Nov 20 '18 at 19:08
weibenfalkweibenfalk
54617
You also shouldn't need to have two setState calls directly after each other. Make them in one setState instead like so:
this.setState({
validation: false,
errorMessage: 'Please enter correct email adress',
)}
answered Nov 20 '18 at 19:08
weibenfalkweibenfalk
54617
answered Nov 20 '18 at 19:08
weibenfalkweibenfalk
54617
answered Nov 20 '18 at 19:08
weibenfalkweibenfalk
54617
answered Nov 20 '18 at 19:08
weibenfalkweibenfalk
54617
54617
add a comment |
add a comment |
0
I think you are using a stale value of validation in the statement if(validation). Can you please try something like:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
const {validation} = this.state // read correct validation.. not something that was previously set
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}answered Nov 20 '18 at 19:24
shmitshmit
581311
add a comment |
0
I think you are using a stale value of validation in the statement if(validation). Can you please try something like:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
const {validation} = this.state // read correct validation.. not something that was previously set
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}answered Nov 20 '18 at 19:24
shmitshmit
581311
add a comment |
0
0
0
I think you are using a stale value of validation in the statement if(validation). Can you please try something like:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
const {validation} = this.state // read correct validation.. not something that was previously set
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}answered Nov 20 '18 at 19:24
shmitshmit
581311
I think you are using a stale value of validation in the statement if(validation). Can you please try something like:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
const {validation} = this.state // read correct validation.. not something that was previously set
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}onSubmit = (e) => {
const { firstName, lastName, email, eventDate} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
const {validation} = this.state // read correct validation.. not something that was previously set
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}onSubmit = (e) => {
const { firstName, lastName, email, eventDate} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true})
} else {
this.setState({validation: false})
this.setState({errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false});
this.setState({errorMessage: 'Please fill in all fields properly'})
}
const {validation} = this.state // read correct validation.. not something that was previously set
if (validation) {
const newEvent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
email: this.state.email,
eventDate: this.state.eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
});
}
e.preventDefault();
}answered Nov 20 '18 at 19:24
shmitshmit
581311
answered Nov 20 '18 at 19:24
shmitshmit
581311
answered Nov 20 '18 at 19:24
shmitshmit
581311
answered Nov 20 '18 at 19:24
shmitshmit
581311
581311
add a comment |
add a comment |
0
Fixed this issue, they key to success was moving my if(validation) statement body to callback function of setState.
Here is working code:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true}, () => {
const newEvent = {
firstName: firstName,
lastName: lastName,
email: email,
eventDate: eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
})
})
} else {
this.setState({validation: false, errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false, errorMessage: 'Please fill in all fields properly'})
}
e.preventDefault();
}
answered Nov 20 '18 at 19:39
D.WasilewskiD.Wasilewski
226
add a comment |
0
Fixed this issue, they key to success was moving my if(validation) statement body to callback function of setState.
Here is working code:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true}, () => {
const newEvent = {
firstName: firstName,
lastName: lastName,
email: email,
eventDate: eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
})
})
} else {
this.setState({validation: false, errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false, errorMessage: 'Please fill in all fields properly'})
}
e.preventDefault();
}
answered Nov 20 '18 at 19:39
D.WasilewskiD.Wasilewski
226
add a comment |
0
0
0
Fixed this issue, they key to success was moving my if(validation) statement body to callback function of setState.
Here is working code:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true}, () => {
const newEvent = {
firstName: firstName,
lastName: lastName,
email: email,
eventDate: eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
})
})
} else {
this.setState({validation: false, errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false, errorMessage: 'Please fill in all fields properly'})
}
e.preventDefault();
}
answered Nov 20 '18 at 19:39
D.WasilewskiD.Wasilewski
226
Fixed this issue, they key to success was moving my if(validation) statement body to callback function of setState.
Here is working code:
onSubmit = (e) => {
const { firstName, lastName, email, eventDate, validation} = this.state
if (firstName, lastName, eventDate, email) {
this.setState({validation: true})
if (new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}/g).test(email)) {
this.setState({validation: true}, () => {
const newEvent = {
firstName: firstName,
lastName: lastName,
email: email,
eventDate: eventDate
}
this.props.addEvent(newEvent);
this.setState({
firstName: '',
lastName: '',
email: '',
eventDate: '',
validation: false,
errorMessage: ''
})
})
} else {
this.setState({validation: false, errorMessage: 'Please enter correct email adress'})
}
} else {
this.setState({validation: false, errorMessage: 'Please fill in all fields properly'})
}
e.preventDefault();
}
answered Nov 20 '18 at 19:39
D.WasilewskiD.Wasilewski
226
answered Nov 20 '18 at 19:39
D.WasilewskiD.Wasilewski
226
answered Nov 20 '18 at 19:39
D.WasilewskiD.Wasilewski
226
answered Nov 20 '18 at 19:39
D.WasilewskiD.Wasilewski
226
226
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399658%2fsubmit-button-takes-2-clicks-to-call-function-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
this.setState is an asyc function, so beware of its side-effects
– Kumar Nitesh
Nov 20 '18 at 19:22