How to write common function for two functions in react
1
I have a class in which their are two methods handleChange(e) and cardClick(e) and i want to sort an object array both of the functions.
My code is:
handleChange(e){
arr.sort(compare);
function compare(a, b){
if(a.population === 'unknown')
return 1;
if(b.population === 'unknown')
return -1;
if(parseInt(a.population) < parseInt(b.population))
return 1;
else if(parseInt(a.population) > parseInt(b.population))
return -1;
else
return 0;
}
}
and
cardClick(e){
arr.sort(compare);
function compare(a, b){
if(a.population === 'unknown')
return 1;
if(b.population === 'unknown')
return -1;
if(parseInt(a.population) < parseInt(b.population))
return 1;
else if(parseInt(a.population) > parseInt(b.population))
return -1;
else
return 0;
}
}
I have to write the compare function definition in both handleChange and cardClick. Is their any way so that i don't have to write it twice, and i can use it in both functions.
reactjs react-native react-redux react-router
asked Nov 21 '18 at 8:31
rajatgalavrajatgalav
298
add a comment |
1
I have a class in which their are two methods handleChange(e) and cardClick(e) and i want to sort an object array both of the functions.
My code is:
handleChange(e){
arr.sort(compare);
function compare(a, b){
if(a.population === 'unknown')
return 1;
if(b.population === 'unknown')
return -1;
if(parseInt(a.population) < parseInt(b.population))
return 1;
else if(parseInt(a.population) > parseInt(b.population))
return -1;
else
return 0;
}
}
and
cardClick(e){
arr.sort(compare);
function compare(a, b){
if(a.population === 'unknown')
return 1;
if(b.population === 'unknown')
return -1;
if(parseInt(a.population) < parseInt(b.population))
return 1;
else if(parseInt(a.population) > parseInt(b.population))
return -1;
else
return 0;
}
}
I have to write the compare function definition in both handleChange and cardClick. Is their any way so that i don't have to write it twice, and i can use it in both functions.
reactjs react-native react-redux react-router
asked Nov 21 '18 at 8:31
rajatgalavrajatgalav
298
add a comment |
1
1
1
I have a class in which their are two methods handleChange(e) and cardClick(e) and i want to sort an object array both of the functions.
My code is:
handleChange(e){
arr.sort(compare);
function compare(a, b){
if(a.population === 'unknown')
return 1;
if(b.population === 'unknown')
return -1;
if(parseInt(a.population) < parseInt(b.population))
return 1;
else if(parseInt(a.population) > parseInt(b.population))
return -1;
else
return 0;
}
}
and
cardClick(e){
arr.sort(compare);
function compare(a, b){
if(a.population === 'unknown')
return 1;
if(b.population === 'unknown')
return -1;
if(parseInt(a.population) < parseInt(b.population))
return 1;
else if(parseInt(a.population) > parseInt(b.population))
return -1;
else
return 0;
}
}
I have to write the compare function definition in both handleChange and cardClick. Is their any way so that i don't have to write it twice, and i can use it in both functions.
reactjs react-native react-redux react-router
asked Nov 21 '18 at 8:31
rajatgalavrajatgalav
298
I have a class in which their are two methods handleChange(e) and cardClick(e) and i want to sort an object array both of the functions.
My code is:
handleChange(e){
arr.sort(compare);
function compare(a, b){
if(a.population === 'unknown')
return 1;
if(b.population === 'unknown')
return -1;
if(parseInt(a.population) < parseInt(b.population))
return 1;
else if(parseInt(a.population) > parseInt(b.population))
return -1;
else
return 0;
}
}
and
cardClick(e){
arr.sort(compare);
function compare(a, b){
if(a.population === 'unknown')
return 1;
if(b.population === 'unknown')
return -1;
if(parseInt(a.population) < parseInt(b.population))
return 1;
else if(parseInt(a.population) > parseInt(b.population))
return -1;
else
return 0;
}
}
I have to write the compare function definition in both handleChange and cardClick. Is their any way so that i don't have to write it twice, and i can use it in both functions.
reactjs react-native react-redux react-router
reactjs react-native react-redux react-router
asked Nov 21 '18 at 8:31
rajatgalavrajatgalav
298
asked Nov 21 '18 at 8:31
rajatgalavrajatgalav
298
asked Nov 21 '18 at 8:31
rajatgalavrajatgalav
298
asked Nov 21 '18 at 8:31
rajatgalavrajatgalav
298
asked Nov 21 '18 at 8:31
rajatgalavrajatgalav
298
298
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You can define the function outside of the class and use it in both event handlers.
Example
function compare(a, b) {
if (a.population === "unknown") return 1;
if (b.population === "unknown") return -1;
if (parseInt(a.population) < parseInt(b.population)) return 1;
else if (parseInt(a.population) > parseInt(b.population)) return -1;
else return 0;
}
class App extends React.Component {
handleChange = e => {
arr.sort(compare);
// ...
};
cardClick = e => {
arr.sort(compare);
// ...
};
render() {
// ...
}
}
answered Nov 21 '18 at 8:33
TholleTholle
38.7k54265
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%2f53407959%2fhow-to-write-common-function-for-two-functions-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can define the function outside of the class and use it in both event handlers.
Example
function compare(a, b) {
if (a.population === "unknown") return 1;
if (b.population === "unknown") return -1;
if (parseInt(a.population) < parseInt(b.population)) return 1;
else if (parseInt(a.population) > parseInt(b.population)) return -1;
else return 0;
}
class App extends React.Component {
handleChange = e => {
arr.sort(compare);
// ...
};
cardClick = e => {
arr.sort(compare);
// ...
};
render() {
// ...
}
}
answered Nov 21 '18 at 8:33
TholleTholle
38.7k54265
add a comment |
1
You can define the function outside of the class and use it in both event handlers.
Example
function compare(a, b) {
if (a.population === "unknown") return 1;
if (b.population === "unknown") return -1;
if (parseInt(a.population) < parseInt(b.population)) return 1;
else if (parseInt(a.population) > parseInt(b.population)) return -1;
else return 0;
}
class App extends React.Component {
handleChange = e => {
arr.sort(compare);
// ...
};
cardClick = e => {
arr.sort(compare);
// ...
};
render() {
// ...
}
}
answered Nov 21 '18 at 8:33
TholleTholle
38.7k54265
add a comment |
1
1
1
You can define the function outside of the class and use it in both event handlers.
Example
function compare(a, b) {
if (a.population === "unknown") return 1;
if (b.population === "unknown") return -1;
if (parseInt(a.population) < parseInt(b.population)) return 1;
else if (parseInt(a.population) > parseInt(b.population)) return -1;
else return 0;
}
class App extends React.Component {
handleChange = e => {
arr.sort(compare);
// ...
};
cardClick = e => {
arr.sort(compare);
// ...
};
render() {
// ...
}
}
answered Nov 21 '18 at 8:33
TholleTholle
38.7k54265
You can define the function outside of the class and use it in both event handlers.
Example
function compare(a, b) {
if (a.population === "unknown") return 1;
if (b.population === "unknown") return -1;
if (parseInt(a.population) < parseInt(b.population)) return 1;
else if (parseInt(a.population) > parseInt(b.population)) return -1;
else return 0;
}
class App extends React.Component {
handleChange = e => {
arr.sort(compare);
// ...
};
cardClick = e => {
arr.sort(compare);
// ...
};
render() {
// ...
}
}
answered Nov 21 '18 at 8:33
TholleTholle
38.7k54265
answered Nov 21 '18 at 8:33
TholleTholle
38.7k54265
answered Nov 21 '18 at 8:33
TholleTholle
38.7k54265
answered Nov 21 '18 at 8:33
TholleTholle
38.7k54265
38.7k54265
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%2f53407959%2fhow-to-write-common-function-for-two-functions-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
