1

How can I get the highest number of votes in the following arrays ? I tried to have a look on the net including stackoverflow about how to find the highest value in an array and I tried applying it like this,

const sortHighestVotes = Math.max.apply(Math, votes.map(function(o) { return o.vote ; }))

I got no errors but the value displayed was NaN. I think that this is because of the attribute which is introduced in the handleVotes component. This is different from most of references that I referred to where attribute is already defined in a "key: value" pair in their array/object. A little bit different from my situation. The following are my code. How can I fix this ?

const App = () => {
  const handleClick2 = () => {
    setSelected(Math.floor(Math.random()*anecdotes.length))
  }

  const handleVotes = () => { 
    setVotes((votes) => 
      votes.map((vote, index) => index === selected ? vote + 1 : vote)
    )
  }

  const anecdotes = [
    'If it hurts, do it more often.',
    'Adding manpower to a late software project makes it later!',
    'The first 90 percent of the code accounts for the first 10 percent of the development time...The remaining 10 percent of the code accounts for the other 90 percent of the development time.',
  ]
   
  const [selected, setSelected] = useState(0)
  const [votes, setVotes] = useState(() => Array(anecdotes.length).fill(0))

  const sortHighestVotes = Math.max.apply(Math, votes.map(function(o) { return o.vote ; }))

  return (

    <div style={inlineParagraph}>
      <h1>Anecdote of the day</h1>

      { anecdotes[selected] }

      <div style={inlineButton} >
        <Button handleClick={handleClick2} text="next anecdotes" setSelected={setSelected} />
        <Button handleClick={handleVotes} text="vote" setSelected={setSelected}/> : {votes[selected]}
      </div>

      <h1>Anecdote with the most votes</h1>
      <p> { sortHighestVotes }  </p> 
      
    </div>
  )
}

export default App
Jabri Juhinin
  • 117
  • 8
  • do you have always numbers in your `vote` property? – Nina Scholz Feb 11 '23 at 08:42
  • @NinaScholz yes, i can increase the votes for different anecdotes and it is working well but i want to be able to extract the anecdote that has the highest number of votes and display it using {sortHighestVotes} – Jabri Juhinin Feb 11 '23 at 08:45
  • could yxou have empty arrays? – Nina Scholz Feb 11 '23 at 08:46
  • @NinaScholz if i console.log(votes), i'd have arrays with (3) [0, 0, 0] which will change as i increase the votes. so it could become (3) [1, 2 , 5] or any number as I change the votes – Jabri Juhinin Feb 11 '23 at 08:49
  • @NinaScholz I tried Math.max(...votes) and now it is showing the highest number of votes. but how can i include i display the anecdote that holds the highest votes as well ? – Jabri Juhinin Feb 11 '23 at 09:07
  • in this case, you could use `reduce` and return the highest object or array of objects. – Nina Scholz Feb 11 '23 at 09:08
  • @snnsnn i figured out the answer. i have to use math.max and indexOf. thanks though, appreciate it – Jabri Juhinin Feb 11 '23 at 09:16

1 Answers1

1

Please try Math.max(...votes);. You need to spread the array to get each value, then Math.max will return you the highest value. Just be careful to check if the array exists and has numbers inside.

EDIT: If you want to find the index of the highest vote anectote. You can do:

 const maxVoteIndex = votes.indexOf(Math.max(...votes));
 const maxVoteAnecdote = anecdotes[maxVoteIndex];
programandoconro
  • 2,378
  • 2
  • 18
  • 33
  • this works ! now it is showing the highest number of votes. but how can i display the anecdote that comes with it ? – Jabri Juhinin Feb 11 '23 at 09:04
  • you can try with `indexOf` to get the index of the max vote. Then, use that index to get the anecdote. – programandoconro Feb 11 '23 at 09:06
  • 1
    works like a charm ! I defined 2 variables, const sortHighestVotes = Math.max(...votes) and const anecdoteWithHighestVotes = votes.indexOf(sortHighestVotes). after that, i displayed it . thanks for pointing me in the right direction – Jabri Juhinin Feb 11 '23 at 09:13