onClick fires multiple time in React.js
0
I have following component.
import React from 'react'
import Profile from './Profile'
import Messages from './Messages'
class ContactContent extends React.Component {
constructor () {
super()
this.state = {
message: ''
}
this.handleOnClick = (e) => {
e.preventDefault()
console.log('send message called')
// this.props.onSendMessage(this.state.message)
}
}
render () {
const { id, name, profile, messages } = this.props.user
return (
<div className='content'>
<Profile
name={id}
profile={profile}
/>
<Messages
messages={messages}
/>
<div className='message-input'>
<div className='wrap'>
<input type='text' placeholder='Write your message...' onChange={(e) => this.setState({ message: e.target.value })} />
{/* <i className="fa fa-paperclip attachment" aria-hidden="true"></i> */}
<button className='' onClick={this.handleOnClick}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
</div>
</div>
</div>
)
}
}
export default ContactContent
when I click on button onclick is called which triggers handleonclick function. but handleonclick is being called like infinit time. this is a weird behavior I have seen this first time any idea what I have done wrong?
javascript reactjs javascript-events onclick event-handling
edited Nov 22 '18 at 8:54
wanttobeprofessional
1,02931323
asked Nov 22 '18 at 7:32
ahmed waqas nasirahmed waqas nasir
215
add a comment |
0
I have following component.
import React from 'react'
import Profile from './Profile'
import Messages from './Messages'
class ContactContent extends React.Component {
constructor () {
super()
this.state = {
message: ''
}
this.handleOnClick = (e) => {
e.preventDefault()
console.log('send message called')
// this.props.onSendMessage(this.state.message)
}
}
render () {
const { id, name, profile, messages } = this.props.user
return (
<div className='content'>
<Profile
name={id}
profile={profile}
/>
<Messages
messages={messages}
/>
<div className='message-input'>
<div className='wrap'>
<input type='text' placeholder='Write your message...' onChange={(e) => this.setState({ message: e.target.value })} />
{/* <i className="fa fa-paperclip attachment" aria-hidden="true"></i> */}
<button className='' onClick={this.handleOnClick}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
</div>
</div>
</div>
)
}
}
export default ContactContent
when I click on button onclick is called which triggers handleonclick function. but handleonclick is being called like infinit time. this is a weird behavior I have seen this first time any idea what I have done wrong?
javascript reactjs javascript-events onclick event-handling
edited Nov 22 '18 at 8:54
wanttobeprofessional
1,02931323
asked Nov 22 '18 at 7:32
ahmed waqas nasirahmed waqas nasir
215
I don't see anything wrong with you code
– keul
Nov 22 '18 at 7:56
I figured it out there was external javascript file which was creating issue. Thanks anyway @LucaFabbri
– ahmed waqas nasir
Nov 22 '18 at 8:01
add a comment |
0
0
0
I have following component.
import React from 'react'
import Profile from './Profile'
import Messages from './Messages'
class ContactContent extends React.Component {
constructor () {
super()
this.state = {
message: ''
}
this.handleOnClick = (e) => {
e.preventDefault()
console.log('send message called')
// this.props.onSendMessage(this.state.message)
}
}
render () {
const { id, name, profile, messages } = this.props.user
return (
<div className='content'>
<Profile
name={id}
profile={profile}
/>
<Messages
messages={messages}
/>
<div className='message-input'>
<div className='wrap'>
<input type='text' placeholder='Write your message...' onChange={(e) => this.setState({ message: e.target.value })} />
{/* <i className="fa fa-paperclip attachment" aria-hidden="true"></i> */}
<button className='' onClick={this.handleOnClick}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
</div>
</div>
</div>
)
}
}
export default ContactContent
when I click on button onclick is called which triggers handleonclick function. but handleonclick is being called like infinit time. this is a weird behavior I have seen this first time any idea what I have done wrong?
javascript reactjs javascript-events onclick event-handling
edited Nov 22 '18 at 8:54
wanttobeprofessional
1,02931323
asked Nov 22 '18 at 7:32
ahmed waqas nasirahmed waqas nasir
215
I have following component.
import React from 'react'
import Profile from './Profile'
import Messages from './Messages'
class ContactContent extends React.Component {
constructor () {
super()
this.state = {
message: ''
}
this.handleOnClick = (e) => {
e.preventDefault()
console.log('send message called')
// this.props.onSendMessage(this.state.message)
}
}
render () {
const { id, name, profile, messages } = this.props.user
return (
<div className='content'>
<Profile
name={id}
profile={profile}
/>
<Messages
messages={messages}
/>
<div className='message-input'>
<div className='wrap'>
<input type='text' placeholder='Write your message...' onChange={(e) => this.setState({ message: e.target.value })} />
{/* <i className="fa fa-paperclip attachment" aria-hidden="true"></i> */}
<button className='' onClick={this.handleOnClick}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
</div>
</div>
</div>
)
}
}
export default ContactContent
when I click on button onclick is called which triggers handleonclick function. but handleonclick is being called like infinit time. this is a weird behavior I have seen this first time any idea what I have done wrong?
javascript reactjs javascript-events onclick event-handling
javascript reactjs javascript-events onclick event-handling
edited Nov 22 '18 at 8:54
wanttobeprofessional
1,02931323
asked Nov 22 '18 at 7:32
ahmed waqas nasirahmed waqas nasir
215
edited Nov 22 '18 at 8:54
wanttobeprofessional
1,02931323
asked Nov 22 '18 at 7:32
ahmed waqas nasirahmed waqas nasir
215
edited Nov 22 '18 at 8:54
wanttobeprofessional
1,02931323
edited Nov 22 '18 at 8:54
wanttobeprofessional
1,02931323
edited Nov 22 '18 at 8:54
wanttobeprofessional
1,02931323
1,02931323
asked Nov 22 '18 at 7:32
ahmed waqas nasirahmed waqas nasir
215
asked Nov 22 '18 at 7:32
ahmed waqas nasirahmed waqas nasir
215
asked Nov 22 '18 at 7:32
ahmed waqas nasirahmed waqas nasir
215
215
I don't see anything wrong with you code
– keul
Nov 22 '18 at 7:56
I figured it out there was external javascript file which was creating issue. Thanks anyway @LucaFabbri
– ahmed waqas nasir
Nov 22 '18 at 8:01
add a comment |
I don't see anything wrong with you code
– keul
Nov 22 '18 at 7:56
I figured it out there was external javascript file which was creating issue. Thanks anyway @LucaFabbri
– ahmed waqas nasir
Nov 22 '18 at 8:01
I don't see anything wrong with you code
– keul
Nov 22 '18 at 7:56
I don't see anything wrong with you code
– keul
Nov 22 '18 at 7:56
I figured it out there was external javascript file which was creating issue. Thanks anyway @LucaFabbri
– ahmed waqas nasir
Nov 22 '18 at 8:01
I figured it out there was external javascript file which was creating issue. Thanks anyway @LucaFabbri
– ahmed waqas nasir
Nov 22 '18 at 8:01
add a comment |
2 Answers
2
active
oldest
votes
0
Fixed it there was an external javascript file which was creating this issue. Nothing is wrong with the code.
answered Nov 22 '18 at 8:04
ahmed waqas nasirahmed waqas nasir
215
add a comment |
0
No, you are calling the handleOnClick each time on page load/render load here
So without making this, or to avoid multiple call try to use:
fat arrow call of that function on onClick event.
<button className='' onClick={(e) => this.handleOnClick(e)}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
answered Nov 22 '18 at 12:16
Anupam MauryaAnupam Maurya
868
I disagree. I think using fat arrow is not a good approach here because whenever component renders it creates a new anonymous function which is an overhead we can avoid this by passing reference of this.handleOnClick to onClick. What's you thought?
– ahmed waqas nasir
Nov 23 '18 at 7:06
Firstly you declare your handler function in constructor call. And as told earlier with arrow function, your function will not call till handler makes event on it... So this is correct way.
– Anupam Maurya
Nov 23 '18 at 14:16
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%2f53425893%2fonclick-fires-multiple-time-in-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Fixed it there was an external javascript file which was creating this issue. Nothing is wrong with the code.
answered Nov 22 '18 at 8:04
ahmed waqas nasirahmed waqas nasir
215
add a comment |
0
Fixed it there was an external javascript file which was creating this issue. Nothing is wrong with the code.
answered Nov 22 '18 at 8:04
ahmed waqas nasirahmed waqas nasir
215
add a comment |
0
0
0
Fixed it there was an external javascript file which was creating this issue. Nothing is wrong with the code.
answered Nov 22 '18 at 8:04
ahmed waqas nasirahmed waqas nasir
215
Fixed it there was an external javascript file which was creating this issue. Nothing is wrong with the code.
answered Nov 22 '18 at 8:04
ahmed waqas nasirahmed waqas nasir
215
answered Nov 22 '18 at 8:04
ahmed waqas nasirahmed waqas nasir
215
answered Nov 22 '18 at 8:04
ahmed waqas nasirahmed waqas nasir
215
answered Nov 22 '18 at 8:04
ahmed waqas nasirahmed waqas nasir
215
215
add a comment |
add a comment |
0
No, you are calling the handleOnClick each time on page load/render load here
So without making this, or to avoid multiple call try to use:
fat arrow call of that function on onClick event.
<button className='' onClick={(e) => this.handleOnClick(e)}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
answered Nov 22 '18 at 12:16
Anupam MauryaAnupam Maurya
868
I disagree. I think using fat arrow is not a good approach here because whenever component renders it creates a new anonymous function which is an overhead we can avoid this by passing reference of this.handleOnClick to onClick. What's you thought?
– ahmed waqas nasir
Nov 23 '18 at 7:06
Firstly you declare your handler function in constructor call. And as told earlier with arrow function, your function will not call till handler makes event on it... So this is correct way.
– Anupam Maurya
Nov 23 '18 at 14:16
add a comment |
0
No, you are calling the handleOnClick each time on page load/render load here
So without making this, or to avoid multiple call try to use:
fat arrow call of that function on onClick event.
<button className='' onClick={(e) => this.handleOnClick(e)}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
answered Nov 22 '18 at 12:16
Anupam MauryaAnupam Maurya
868
I disagree. I think using fat arrow is not a good approach here because whenever component renders it creates a new anonymous function which is an overhead we can avoid this by passing reference of this.handleOnClick to onClick. What's you thought?
– ahmed waqas nasir
Nov 23 '18 at 7:06
Firstly you declare your handler function in constructor call. And as told earlier with arrow function, your function will not call till handler makes event on it... So this is correct way.
– Anupam Maurya
Nov 23 '18 at 14:16
add a comment |
0
0
0
No, you are calling the handleOnClick each time on page load/render load here
So without making this, or to avoid multiple call try to use:
fat arrow call of that function on onClick event.
<button className='' onClick={(e) => this.handleOnClick(e)}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
answered Nov 22 '18 at 12:16
Anupam MauryaAnupam Maurya
868
No, you are calling the handleOnClick each time on page load/render load here
So without making this, or to avoid multiple call try to use:
fat arrow call of that function on onClick event.
<button className='' onClick={(e) => this.handleOnClick(e)}><i className='fa fa-paper-plane' aria-hidden='true' /></button>
answered Nov 22 '18 at 12:16
Anupam MauryaAnupam Maurya
868
answered Nov 22 '18 at 12:16
Anupam MauryaAnupam Maurya
868
answered Nov 22 '18 at 12:16
Anupam MauryaAnupam Maurya
868
answered Nov 22 '18 at 12:16
Anupam MauryaAnupam Maurya
868
868
I disagree. I think using fat arrow is not a good approach here because whenever component renders it creates a new anonymous function which is an overhead we can avoid this by passing reference of this.handleOnClick to onClick. What's you thought?
– ahmed waqas nasir
Nov 23 '18 at 7:06
Firstly you declare your handler function in constructor call. And as told earlier with arrow function, your function will not call till handler makes event on it... So this is correct way.
– Anupam Maurya
Nov 23 '18 at 14:16
add a comment |
I disagree. I think using fat arrow is not a good approach here because whenever component renders it creates a new anonymous function which is an overhead we can avoid this by passing reference of this.handleOnClick to onClick. What's you thought?
– ahmed waqas nasir
Nov 23 '18 at 7:06
Firstly you declare your handler function in constructor call. And as told earlier with arrow function, your function will not call till handler makes event on it... So this is correct way.
– Anupam Maurya
Nov 23 '18 at 14:16
I disagree. I think using fat arrow is not a good approach here because whenever component renders it creates a new anonymous function which is an overhead we can avoid this by passing reference of this.handleOnClick to onClick. What's you thought?
– ahmed waqas nasir
Nov 23 '18 at 7:06
I disagree. I think using fat arrow is not a good approach here because whenever component renders it creates a new anonymous function which is an overhead we can avoid this by passing reference of this.handleOnClick to onClick. What's you thought?
– ahmed waqas nasir
Nov 23 '18 at 7:06
Firstly you declare your handler function in constructor call. And as told earlier with arrow function, your function will not call till handler makes event on it... So this is correct way.
– Anupam Maurya
Nov 23 '18 at 14:16
Firstly you declare your handler function in constructor call. And as told earlier with arrow function, your function will not call till handler makes event on it... So this is correct way.
– Anupam Maurya
Nov 23 '18 at 14:16
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%2f53425893%2fonclick-fires-multiple-time-in-react-js%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
I don't see anything wrong with you code
– keul
Nov 22 '18 at 7:56
I figured it out there was external javascript file which was creating issue. Thanks anyway @LucaFabbri
– ahmed waqas nasir
Nov 22 '18 at 8:01