React find 3 highest values in an array

Question

Hello I have been trying to find the highest value in my constantly changing array. What I need is to have an array that changes acording to input (which I have) and a table that shows the three highest values of that array and changes along with the array values. I used the Math.max, but I always get NaN as my answer. This is my code:

   const array = [
    Weighted1,
    Weighted2,
    Weighted3,
    Weighted4,
    Weighted5,
    Weighted6,
    Weighted7,
    Weighted8,
    Weighted9,
    Weighted10,
    Weighted11,
    Weighted12,
  ];

  const [First, setFirst] = useState("");
  const [Second, setSecond] = useState("");
  const [Third, setThird] = useState("");
 
  /*
  useEffect(() => {
    setFirst(Math.max(array));
  }, [array]);
  useEffect(() => {
    setSecond(array.splice(array.indexOf(one), 1), Math.max(array));
  }, [array, one]);
  useEffect(() => {
    setThird(array.splice(array.indexOf(Second), 1));
  }, [array, Second]);
*/

Mytable has these two tipes of values, one is the weighted (all those zeros) and the other is the names I want to be displayed depending on the weighted next to it. enter image description here

Math.max(...array), I think.

kaya3
– kaya3

2022-02-08 11:24:11 +00:00
Commented Feb 8, 2022 at 11:24 — kaya3
– kaya3, Commented Feb 8, 2022 at 11:24

jolo · Accepted Answer · 2022-02-08 11:00:03Z

1

You can use your useEffect() to listens to the changing input and sort the array via: Array.sort(). After this you can set your use last 3 items in that array as your values.

  useEffect(() => {
    const sortedArray = yourInputArray.sort();
    setFirst(sortedArray[sortedArray.length - 1])
    setSecond(sortedArray[sortedArray.length - 2])
    setThird(sortedArray[sortedArray.length - 3])
  }, [yourInputArray]);

A better approach would be storing your input values as a sorted array and using that directly in the component.

const [sortedArray, setSortedArray] = useState();

useEffect(() => {
  setSortedArray(yourInputArray.sort());
}, [yourInputArray]);

{sortedArray && (
  <>
    <p>1: {sortedArray[sortedArray.length - 1]}</p>
    <p>2: {sortedArray[sortedArray.length - 2]}</p>
    <p>3: {sortedArray[sortedArray.length - 3]}</p>
  <>
)}

edited Feb 8, 2022 at 11:00

answered Feb 8, 2022 at 10:37

jolo

6591 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

jolo Over a year ago

Glad it helped.

jolo Over a year ago

And please note that the first solution was to illustrate how you can 1 useEffect to handle several operations at once. It is not good practice.

jolo Over a year ago

The second solution is a better example of how you can think about the data that you store.

jolo Over a year ago

It aims to keep it simple:

receive data => sort the data in the right order => store that data in a useState  => use that useState variable to display UI

jolo Over a year ago

With this approach there is a single source of truth. Your data is the sorted array and the UI displays that data.

|

Collectives™ on Stack Overflow

React find 3 highest values in an array

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related