Grouping and displaying people by political demographics The Next CEO of Stack OverflowReactJS...
Received an invoice from my ex-employer billing me for training; how to handle?
Solving system of ODEs with extra parameter
Are there any unintended negative consequences to allowing PCs to gain multiple levels at once in a short milestone-XP game?
Are police here, aren't itthey?
Rotate a column
Flying from Cape Town to England and return to another province
What benefits would be gained by using human laborers instead of drones in deep sea mining?
Why the difference in type-inference over the as-pattern in two similar function definitions?
Why do remote US companies require working in the US?
Would a completely good Muggle be able to use a wand?
Make solar eclipses exceedingly rare, but still have new moons
Why don't programming languages automatically manage the synchronous/asynchronous problem?
Is micro rebar a better way to reinforce concrete than rebar?
WOW air has ceased operation, can I get my tickets refunded?
How to get from Geneva Airport to Metabief?
Why, when going from special to general relativity, do we just replace partial derivatives with covariant derivatives?
Should I tutor a student who I know has cheated on their homework?
Is it ever safe to open a suspicious HTML file (e.g. email attachment)?
Beveled cylinder cutout
What does "Its cash flow is deeply negative" mean?
Circle x^2 + y^2 = n! doesn't hit any lattice points for any n except for 0, 1, 2 and 6 or does it?
Where do students learn to solve polynomial equations these days?
Running a General Election and the European Elections together
Decomposition of product of two Plucker coordinates
Grouping and displaying people by political demographics
The Next CEO of Stack OverflowReactJS app to add and validate items to a listsportsRunning and sportsWalkingPersonal resume and project site using ReactTodo application in React with shouldComponentUpdate and Immutable.jsMovie info website (React, axios and Semantic UI)List with selectable and sortable elementsNavigation bar React component, with a “back” and a “close” variantIn React/Redux, fetch a list from a server and create a randomized subset with lifecycle methodsRendering plain text with paragraphs and line breaks as HTMLStateless tooltip component using React hooks and ref
$begingroup$
I have a function that sorts and groups items inside an array and then adds a corresponding jsx element to the page.
I've already refactored it from 100 lines of code to 44, but I'm sure that its still unreadable pile of spaghetti code. I've tried filtering individuals and groups separately but that just bloats my code to some unbelievable extent so im looking for ways to reduce bloat and improve readability.
// array - array im sorting
// ageStart - minimal age of person
// ageEnd - minimum age of person
// activity & time - specific to the jsx elements inside(dont really play a role here)
//
function group(array, ageStart, ageEnd, activity, time = '') {
// filtering by political views and age.
const polViewsLib = array.filter(item => item.polViews === 'Liberal'
&& item.age >= ageStart
&& item.age <= ageEnd)
//grouping items inside an array using reduce(groups people whose age difference is less than 5)
.reduce((acc, curr, ind, arr) => {
if (
!ind
|| curr.age - arr[ind - 1].age > 5
)acc.push([]);
acc[acc.length - 1].push(curr);
return acc;
}, []);
const polViewsConservative = array.filter(item => item.polViews === 'Conservative'
&& item.age >= ageStart
&& item.age <= ageEnd).reduce((acc, curr, ind, arr) => {
if (
!ind
|| curr.age - arr[ind - 1].age > 5
)acc.push([]);
acc[acc.length - 1].push(curr);
return acc;
}, []);
// returning data sorted by age and mapping them to corresponding jsx elements
return [polViewsLib, polViewsConservative].sort((a,b) => {
a[0].age - b[0].age;
}).map((item, index) => {
const res = item.length > 1 ? (
<PersonContainer
key={item[index].id}
data={item}
visibility={activity}
timePeriod={time}
/>
)
: (
<Person
key={item.id}
data={item[0]}
visibility={activity}
timePeriod={item}
/>
);
return res;
});
}
Typical item inside array that I process:
{
id:151324,
name: 'John',
age: 45,
polViews: 'Liberal',
}
react.js jsx
edited 2 days ago
200_success
130k17156420
asked 2 days ago
dobbeydobbey
111
New contributor
dobbey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
$begingroup$
I have a function that sorts and groups items inside an array and then adds a corresponding jsx element to the page.
I've already refactored it from 100 lines of code to 44, but I'm sure that its still unreadable pile of spaghetti code. I've tried filtering individuals and groups separately but that just bloats my code to some unbelievable extent so im looking for ways to reduce bloat and improve readability.
// array - array im sorting
// ageStart - minimal age of person
// ageEnd - minimum age of person
// activity & time - specific to the jsx elements inside(dont really play a role here)
//
function group(array, ageStart, ageEnd, activity, time = '') {
// filtering by political views and age.
const polViewsLib = array.filter(item => item.polViews === 'Liberal'
&& item.age >= ageStart
&& item.age <= ageEnd)
//grouping items inside an array using reduce(groups people whose age difference is less than 5)
.reduce((acc, curr, ind, arr) => {
if (
!ind
|| curr.age - arr[ind - 1].age > 5
)acc.push([]);
acc[acc.length - 1].push(curr);
return acc;
}, []);
const polViewsConservative = array.filter(item => item.polViews === 'Conservative'
&& item.age >= ageStart
&& item.age <= ageEnd).reduce((acc, curr, ind, arr) => {
if (
!ind
|| curr.age - arr[ind - 1].age > 5
)acc.push([]);
acc[acc.length - 1].push(curr);
return acc;
}, []);
// returning data sorted by age and mapping them to corresponding jsx elements
return [polViewsLib, polViewsConservative].sort((a,b) => {
a[0].age - b[0].age;
}).map((item, index) => {
const res = item.length > 1 ? (
<PersonContainer
key={item[index].id}
data={item}
visibility={activity}
timePeriod={time}
/>
)
: (
<Person
key={item.id}
data={item[0]}
visibility={activity}
timePeriod={item}
/>
);
return res;
});
}
Typical item inside array that I process:
{
id:151324,
name: 'John',
age: 45,
polViews: 'Liberal',
}
react.js jsx
edited 2 days ago
200_success
130k17156420
asked 2 days ago
dobbeydobbey
111
New contributor
dobbey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
$begingroup$
I have a function that sorts and groups items inside an array and then adds a corresponding jsx element to the page.
I've already refactored it from 100 lines of code to 44, but I'm sure that its still unreadable pile of spaghetti code. I've tried filtering individuals and groups separately but that just bloats my code to some unbelievable extent so im looking for ways to reduce bloat and improve readability.
// array - array im sorting
// ageStart - minimal age of person
// ageEnd - minimum age of person
// activity & time - specific to the jsx elements inside(dont really play a role here)
//
function group(array, ageStart, ageEnd, activity, time = '') {
// filtering by political views and age.
const polViewsLib = array.filter(item => item.polViews === 'Liberal'
&& item.age >= ageStart
&& item.age <= ageEnd)
//grouping items inside an array using reduce(groups people whose age difference is less than 5)
.reduce((acc, curr, ind, arr) => {
if (
!ind
|| curr.age - arr[ind - 1].age > 5
)acc.push([]);
acc[acc.length - 1].push(curr);
return acc;
}, []);
const polViewsConservative = array.filter(item => item.polViews === 'Conservative'
&& item.age >= ageStart
&& item.age <= ageEnd).reduce((acc, curr, ind, arr) => {
if (
!ind
|| curr.age - arr[ind - 1].age > 5
)acc.push([]);
acc[acc.length - 1].push(curr);
return acc;
}, []);
// returning data sorted by age and mapping them to corresponding jsx elements
return [polViewsLib, polViewsConservative].sort((a,b) => {
a[0].age - b[0].age;
}).map((item, index) => {
const res = item.length > 1 ? (
<PersonContainer
key={item[index].id}
data={item}
visibility={activity}
timePeriod={time}
/>
)
: (
<Person
key={item.id}
data={item[0]}
visibility={activity}
timePeriod={item}
/>
);
return res;
});
}
Typical item inside array that I process:
{
id:151324,
name: 'John',
age: 45,
polViews: 'Liberal',
}
react.js jsx
edited 2 days ago
200_success
130k17156420
asked 2 days ago
dobbeydobbey
111
New contributor
dobbey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
I have a function that sorts and groups items inside an array and then adds a corresponding jsx element to the page.
I've already refactored it from 100 lines of code to 44, but I'm sure that its still unreadable pile of spaghetti code. I've tried filtering individuals and groups separately but that just bloats my code to some unbelievable extent so im looking for ways to reduce bloat and improve readability.
// array - array im sorting
// ageStart - minimal age of person
// ageEnd - minimum age of person
// activity & time - specific to the jsx elements inside(dont really play a role here)
//
function group(array, ageStart, ageEnd, activity, time = '') {
// filtering by political views and age.
const polViewsLib = array.filter(item => item.polViews === 'Liberal'
&& item.age >= ageStart
&& item.age <= ageEnd)
//grouping items inside an array using reduce(groups people whose age difference is less than 5)
.reduce((acc, curr, ind, arr) => {
if (
!ind
|| curr.age - arr[ind - 1].age > 5
)acc.push([]);
acc[acc.length - 1].push(curr);
return acc;
}, []);
const polViewsConservative = array.filter(item => item.polViews === 'Conservative'
&& item.age >= ageStart
&& item.age <= ageEnd).reduce((acc, curr, ind, arr) => {
if (
!ind
|| curr.age - arr[ind - 1].age > 5
)acc.push([]);
acc[acc.length - 1].push(curr);
return acc;
}, []);
// returning data sorted by age and mapping them to corresponding jsx elements
return [polViewsLib, polViewsConservative].sort((a,b) => {
a[0].age - b[0].age;
}).map((item, index) => {
const res = item.length > 1 ? (
<PersonContainer
key={item[index].id}
data={item}
visibility={activity}
timePeriod={time}
/>
)
: (
<Person
key={item.id}
data={item[0]}
visibility={activity}
timePeriod={item}
/>
);
return res;
});
}
Typical item inside array that I process:
{
id:151324,
name: 'John',
age: 45,
polViews: 'Liberal',
}
react.js jsx
react.js jsx
edited 2 days ago
200_success
130k17156420
asked 2 days ago
dobbeydobbey
111
New contributor
dobbey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 2 days ago
200_success
130k17156420
asked 2 days ago
dobbeydobbey
111
New contributor
dobbey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 2 days ago
200_success
130k17156420
edited 2 days ago
200_success
130k17156420
edited 2 days ago
200_success
130k17156420
130k17156420
asked 2 days ago
dobbeydobbey
111
New contributor
dobbey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
dobbeydobbey
111
asked 2 days ago
dobbeydobbey
111
111
New contributor
dobbey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
dobbey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
dobbey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
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: "196"
};
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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
});
}
});
dobbey is a new contributor. Be nice, and check out our Code of Conduct.
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%2fcodereview.stackexchange.com%2fquestions%2f216421%2fgrouping-and-displaying-people-by-political-demographics%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
dobbey is a new contributor. Be nice, and check out our Code of Conduct.
dobbey is a new contributor. Be nice, and check out our Code of Conduct.
dobbey is a new contributor. Be nice, and check out our Code of Conduct.
dobbey is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- 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.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
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%2fcodereview.stackexchange.com%2fquestions%2f216421%2fgrouping-and-displaying-people-by-political-demographics%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
