1

In react, I have a component that takes in 2 destructured parameters. One of them is an array called points. However, when attempting to call the Math.max(...points), I get an error stating Uncaught TypeError: Found non-callable @@iterator. I am confused to this as points is definitely an array from where I am calling it. Below is the code where I get my error:

const MostVotesDisplay = ({anecdotes, points}) =>
{
  let max = Math.max(...points)
  if(max === 0)
    return (<div>No votes for any anecdotes yet!</div>)
  else
    return (
      <div>
        <p>{anecdotes[max]}</p>
        <p>{points[max]}</p>
      </div>
    )
}

And the following code is where I call my function:

const [points, setPoints] = useState(Array(7).fill(0))
  return (
    <div>
      <h1>Anecdote of the day</h1>
      <p>{anecdotes[selected]}</p>
      <p>has {points[selected]} votes</p>
      <button onClick={() => vote(selected)}>vote</button>
      <button onClick={generateAnecdote}>next anecdote</button>

      <h1>Anecdote with the most votes</h1>
      <MostVotesDisplay anecdotes={anecdotes} points={points}/>
    </div>
  )

I've included my full code for more information:

import React, {useState} from 'react'

const MostVotesDisplay = ({anecdotes, points}) =>
{
  let max = Math.max(...points)
  if(max === 0)
    return (<div>No votes for any anecdotes yet!</div>)
  else
    return (
      <div>
        <p>{anecdotes[max]}</p>
        <p>{points[max]}</p>
      </div>
    )
}
const App = () => {
  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.',
    'Any fool can write code that a computer can understand. Good programmers write code that humans can understand.',
    'Premature optimization is the root of all evil.',
    'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.',
    'Programming without an extremely heavy use of console.log is same as if a doctor would refuse to use x-rays or blood tests when diagnosing patients'
  ] 
  const [selected, setSelected] = useState(0)

  const [points, setPoints] = useState(Array(7).fill(0))

  const generateAnecdote = () => 
  {
    let index = Math.floor(Math.random() * anecdotes.length)

    setSelected(index)
  }

  const vote = (index) =>
  {
    const newPoints = {...points}
    
    newPoints[index]++

    setPoints(newPoints)
  }

  return (
    <div>
      <h1>Anecdote of the day</h1>
      <p>{anecdotes[selected]}</p>
      <p>has {points[selected]} votes</p>
      <button onClick={() => vote(selected)}>vote</button>
      <button onClick={generateAnecdote}>next anecdote</button>

      <h1>Anecdote with the most votes</h1>
      <MostVotesDisplay anecdotes={anecdotes} points={points}/>
    </div>
  )
}

export default App
5
  • Where do you call setPoints? Jan 13 at 22:29
  • I call setPoints in another function declared inside the App component. Would that conflict with what I have?
    – questions
    Jan 13 at 22:31
  • Yeah, that's probably where the problem is Jan 13 at 22:31
  • I'm confused as to why that is a problem?
    – questions
    Jan 13 at 22:31
  • I've also added the rest of my code @CertainPerformance. I'm just confused because I'm not modifying points in anyway
    – questions
    Jan 13 at 22:32

3 Answers 3

Reset to default

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

2

With

  const vote = (index) =>
  {
    const newPoints = {...points}
    
    newPoints[index]++

    setPoints(newPoints)
  }

you are creating a object with all the own-properties and values of points. For example, starting with

[2, 3]

newPoints becomes

{
  0: 2,
  1: 3
}

It's not an array anymore, but a plain object - and objects aren't iterable, so they can't be spread into an argument list.

You need either

const vote = (index) => {
    const newPoints = [...points]
    newPoints[index]++
    setPoints(newPoints)
}

or

const vote = (index) => {
    setPoints(
        points.map((val, i) => i === index ? val + 1 : val)
    );
}
0
0
let max = Math.max(...points)

change to

let max = Math.max({...points})
0

The logic of

const MostVotesDisplay = ({anecdotes, points}) =>
  {
    let max = Math.max(...points)
    if(max === 0)
      return (<div>No votes for any anecdotes yet!</div>)
    else
      return (
        <div>
          <p>{anecdotes[max]}</p>
          <p>{points[max]}</p>
        </div>
      )
  }

should be:

   const MostVotesDisplay = ({ anecdotes, points }) => {
    let max = Math.max(...points);
    let maxVoteIndex = points.indexOf(Math.max(...points));
    if (max === 0) return <div>No votes for any anecdotes yet!</div>;
    else
      return (
        <div>
          <p>{anecdotes[maxVoteIndex]}</p>
          <p>{points[maxVoteIndex]}</p>
        </div>
      );
  };

I know this because it's FulStackOPen 's homework.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.