score:1

the problem is that you are only using the values() to perform the sort, when you should be sorting the objects with the keys as well. the other problem you have, is that it is not generally good practice to desire your object keys to be in a particular order. it makes much more sense to change your render function to results.map instead of object.keys(results).map. here is your desired output though:

const studentdata = {
 "studentname1": {
      "active": true,
      "gender": "male" 
  },
  "studentname2": {
      "active": false,
      "gender": "male" 
  },
  "studentname3": {
      "active": false,
      "gender": "female" 
  },
 "studentname4": {
      "active": true,
      "gender": "female" 
  },
 "studentname5": {
      "active": true,
      "gender": "female" 
  },
  "studentname6": {
      "active": false,
      "gender": "female" 
  }
}

const sorted = object.entries(studentdata)
  .sort((a, b) => b[1].active - a[1].active)
  .reduce((r, [key, value]) => {
    r[key] = value
    return r
  }, {})
  
console.log(sorted)

if you remove the reduce(), you will get your desired results, but simply in an array. this is preferable, because the reduce is redundant, as you are turning it back to an array anyway with object.keys(). also while key order should be maintained these days, it still feels unintuitive to rely on it.

score:1

sort on object.entries, then reconstruct the object in your map statement (using eval unfortunately to preserve the variable name):

const studentdata = {
   "studentname1": {
        "active": true,
        "gender": "male" 
    },
    "studentname2": {
        "active": false,
        "gender": "male" 
    },
    "studentname3": {
        "active": false,
        "gender": "female" 
    },
   "studentname4": {
        "active": true,
        "gender": "female" 
    },
   "studentname5": {
        "active": true,
        "gender": "female" 
    },
    "studentname6": {
        "active": false,
        "gender": "female" 
    }
};

object.entries(studentdata).sort((a, b) => b[1].active - a[1].active).map(([ name: objname, { active, gender } ]) => (
    eval(`let ${objname} = { active: ${active}, gender: ${gender} }`);
    return (
        <>
            <span>{name}</span>
    )
));

score:2

sort the object's entries (not just the keys) when preparing to render, so that you have a sorted array containing the keys and the associated values at once:

object.entries(studentdata)
  .sort((a, b) => b[1].active - a[1].active)
  .map(([name, { active, gender }]) => (
    // render ul, li with variables name, active, and gender
  ))

Related Query

More Query from same tag