title: In React Hooks. How to set state to a random number and use that to display a string from an array
body: <p>Hi I'm doing a course to learn React Hooks and i'm stuck on a task.
  My task is to create a button that onClick displays a random quote from this array.</p>
  
  <pre><code>const App = (props) =&gt; {
    const [selected, setSelected] = useState(0)
  
    return (
      &lt;div&gt;
        {props.anecdotes[selected]}
      &lt;/div&gt;
    )
  }
  
  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 90 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.'
  ]
  
  ReactDOM.render(
    &lt;App anecdotes={anecdotes} /&gt;,
    document.getElementById('root')
  )
  </code></pre>
  
  <p>I have tried to solve this myself however I encounter errors. Wondered if someone had an easy explanation for this?
  Thanks</p>
  
  <p>This is the error I keep on receiving.</p>
  
  <p>TypeError: Cannot read property '0' of undefined
  App
  src/App.js:14
    11 | 
    12 | return (
    13 |   </p>
  
  <blockquote>
    <p>14 |     Get Random
         | ^  15 |     {anecdotes[selected]}
      16 |   
      17 | )</p>
  </blockquote>