How to change order of rendering in a React map

Question

I have a simple task and I feel the answer to this question is also simple. But for some reason I can't wrap my head around it. I'm supposed to get a list of questions from a database and display them on the site. This particular section is yes or no questions. When I get the questions from the database, most of them are already in order, "yes" and then "no". However, there's one that's flipped. So my question is, how do I flip the reversed one to its correct order?

I honestly haven't tried much because like I said, for some reason I can't wrap my head around it. But I do know that in the database the questions have a field called order where yes is 0 and no is 1. So I'm guessing I'll have to use that in some way.

Here's my code for rendering the questions,

{state.surveyQuestions.map(question => (
    <span key={question.question.id}>
        <FormLabel className={classes.label} component="legend">{question.question.label}</FormLabel>
        <RadioGroup value={state.consent} onChange={handleChange} style={{ height: 'auto', padding: '10px' }}>
            {question.question.choices.items.map(choice => (
                <FormControlLabel key={choice.order} style={{ paddingTop: '1px' }} value={choice.value} control={<Radio />} label={choice.label} />
            ))}
        </RadioGroup>
    </span>
))}

and here's what's coming from the database,

"choices": {
    "items": [
        {
            "label": "No",
            "value": "{\"value\":\"0\"}",
            "dataUID": null,
            "description": "No",
            "order": 1,
            "goto": null
        },
        {
            "label": "Yes",
            "value": "{\"value\":\"1\"}",
            "dataUID": null,
            "description": "Yes",
            "order": 0,
            "goto": null
        }
    ]
}

0stone0 · Accepted Answer · 2020-03-11T15:27:28.067

Use Array.protoype.sort() to sort the 'choices' with a custom function;

const data = [
    {
        "label": "No",
        "value": "{\"value\":\"0\"}",
        "dataUID": null,
        "description": "No",
        "order": 1,
        "goto": null
    },
    {
        "label": "Yes",
        "value": "{\"value\":\"1\"}",
        "dataUID": null,
        "description": "Yes",
        "order": 0,
        "goto": null
    }
];

// Full function for readability
function orderByOrderValue( a, b ) {
  if ( a.order < b.order ){
    return -1;
  }
  if ( a.order > b.order ){
    return 1;
  }
  return 0;
}

console.log(data.sort(orderByOrderValue));

// Or use the one-liner
// data.sort((a,b) => (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0));

Ah perfect. Just what I needed and makes perfect sense, thank you. — jordanmccollam, Mar 11 '20 at 15:47

score 0 · Answer 2 · answered Mar 11 '20 at 15:22

0

You could sort with the order attribute of the choices i.e. choices.items when rendering the choices

answered Mar 11 '20 at 15:22

Sumedh Chakravorty

385
1
8

score 0 · Answer 3 · answered Mar 11 '20 at 17:08

You can easily implement a sort function:

data.sort((a, b) => a.order - b.order);

If compareFunction(a, b) returns less than 0, sort a to an index lower than b (i.e. a comes first).

If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different
elements. Note: the ECMAscript standard does not guarantee this
behavior, thus, not all browsers (e.g. Mozilla versions dating back
to at least 2003) respect this.

If compareFunction(a, b) returns greater than 0, sort b to an index lower than a (i.e. b comes first).

Following those rules, if you subtract the first appearing element's order with the following one you get the correct output for the sort function.

How to change order of rendering in a React map

3 Answers3