How to order returned objects in order of highest value of one of the objects properties?

Question

I need to order an array objects mapped out into a div by one of the objects values (int)

I am building a react app that will allow someone to filter out universities based on their majors (i.e. show GWU,ASU, UoA, etc. if the user chose computer engineering. In the returned data, the university model has an upvoteCount which is essentially equivalent to a "like". If the user chooses to view the returned data from highest to lowest upvote count or vice versa, how would I do this with the objects returned and placed into a div?

I have created a component that will create a card with the university's information on it. I thought I might be able to use index to identify the component and React.useState() to evaluate the user has selected view by highest to lowest. Then place a statement to see if these objects need to be sorted or not. I am hoping there is a way to do this through the div and not through the query.

 {data.universityByMajor.map((university) => (
              <div className="home-box ">
                <UniversityList
                  key={university._id}
                  index={university.upvoteCount}
                  _id={university._id}
                  university_name={university.university_name}
                  university_img={university.university_image}
                  upvotes={university.upvoteCount}
                />
              </div>
            ))}

This is what the data.universityByMajor looks like:

[{
"__typename":"University",
"_id":"65312d6d895868ce018b1891",
"university_name":"The George Washington University",
"university_image":"GWU_img.png",
"upvoteCount":2
},
{
"__typename":"University",
"_id":"65312d6d895868ce018b1895",
"university_name":"George Mason University",
"university_image":"GMU_img.jpg",
"upvoteCount":0
}]

Any help would be greatly appreciated

Answer 1

To order an array of objects mapped out into a div by one of the objects values (int), you can use the following steps:

1. Sort the array of objects by the desired value.
2. Map the sorted array of objects to React components.
3. Render the React components in a div.

Here is an example of how to do this in React:

import React, { useState } from "react";

const UniversityList = ({ university }) => {
  return (
    <div className="home-box ">
      <h3>{university.university_name}</h3>
      <img src={university.university_img} alt={university.university_name} />
      <p>Upvotes: {university.upvoteCount}</p>
    </div>
  );
};

const App = () => {
  const [data, setData] = useState([
    {
      "__typename": "University",
      "_id": "65312d6d895868ce018b1891",
      "university_name": "The George Washington University",
      "university_image": "GWU_img.png",
      "upvoteCount": 2,
    },
    {
      "__typename": "University",
      "_id": "65312d6d895868ce018b1895",
      "university_name": "George Mason University",
      "university_image": "GMU_img.jpg",
      "upvoteCount": 0,
    },
  ]);

  const [isSortedByUpvoteCount, setIsSortedByUpvoteCount] = useState(false);

  const handleSort = () => {
    setIsSortedByUpvoteCount(!isSortedByUpvoteCount);

    const sortedData = data.sort((a, b) => {
      if (isSortedByUpvoteCount) {
        return b.upvoteCount - a.upvoteCount;
      } else {
        return a.upvoteCount - b.upvoteCount;
      }
    });

    setData(sortedData);
  };

  return (
    <div>
      <button onClick={handleSort}>Sort by upvote count</button>
      <div className="university-list">
        {data.map((university) => (
          <UniversityList key={university._id} university={university} />
        ))}
      </div>
    </div>
  );
};

export default App;