Undefined array.lenght when passed as an argument to a function in reactjs

Question

In the below code function GetRandomInt takes an input max from function App. The supposed output console.log should just print the argument value. But it prints out Undefined in the console.

const GetRandomInt = ({max}) => {
  console.log(max)
  return Math.floor(Math.random() * (max))
}


const Button = (props) => {
  return (
    <button onClick={props.handleClick}>
      {props.text}
    </button>
  )
}

const Display = (props) => {
  return (
    <div>
      {props.text}
    </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 len = anecdotes.length
  console.log(len)
  const handleClick = () => {
    console.log(Math.floor(Math.random() * (anecdotes.length)))
    const index = GetRandomInt(len) // Math.floor(Math.random() * (anecdotes.length))
    while (index === selected) {
      index = GetRandomInt(len) // Math.floor(Math.random() * (anecdotes.length))
    }
    setSelected(index)
  }
  return (
    <div>
      <h1>Anecdote of the day</h1>
      <Display text={anecdotes[selected]} />
      <Button handleClick={handleClick} text={'Next anecdote'} />
      {/* {anecdotes[selected]} */}
    </div>
  )
}

The above code prints three values to the console

1. assigned variable that contains array length
2. Direct usage of array length to create a random integer
3. Passed value to function to achieve the same in step 2 using function

Can someone tell me why this is happening? Am I passing the value incorrectly either datatype mismatch or something? I am a newbie in reactjs and learning through a course and this is one of the exercises where I am stuck.

Answer 1

The flaw is in your GetRandomInt function. It currently expects an object with the max property, and you are passing a number to it.

Rewrite it as

const GetRandomInt = (max) => {
  console.log(max)
  return Math.floor(Math.random() * (max))
}

What the curly braces around the parameter name essentially do is telling the function "Take the property max of the first argument you are given", while in your case you want the argument itself, and not its max property.

You can read more about object destructuring here