title: Trouble Compiling App.Js code using use Effect and use State hooks in React
body: <p>I am trying to run a web page using useState for Game State and setting game state on a website rendered using React. There are problems compiling with three variables undefined. (Set_GAME_State, SNIPPETS and Snippet Index). </p>
  
  <p>This is based on Daniel Katz's tutorial on using Hooks (useEffect and use State) from the latest version of react: [Link] (<a href="https://medium.com/@dtkatz/react-hooks-tutorial-learn-by-building-b90ec4db2b8e" rel="nofollow noreferrer">https://medium.com/@dtkatz/react-hooks-tutorial-learn-by-building-b90ec4db2b8e</a>)</p>
  
  <p>I tried naming the constant and setting the variable before the hooks but to no avail. </p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  
  const [snippet, setSnippet]= useState('');
  const [userText, setUserText] = useState('');
  const [gameState, setGameState] = useState(INITIAL_Game_State);
  
  setSnippet(SNIPPETS[snippetIndex]);
  setGameState({...gameState, startTime: new Date().getTime() });
  
  useEffect (() =&gt; {
    if (gameState.victory) document.title = 'Victory!';
  });
  ....
    const chooseSnippet = snippetIndex =&gt; () =&gt; {
      console.log('setSnippet', snippetIndex);
      setSnippet(SNIPPETS[snippetIndex]);
    }; 
    const updateUserText = event =&gt; {
        setUserText (event.target.value);
  
      if (event.target.value === snippet) {
        setGameState({
        ...gameState,
        victory: true,
        endTime: new Date().getTime() -gameState.startTime
        });
      }
        console.log('current userText', userText);
      }
  
    return (
      &lt;div&gt;
        &lt;h2&gt; Type Race&lt;/h2&gt;
        &lt;hr /&gt;
        &lt;h3&gt; Snippet &lt;/h3&gt;
        {snippet}
        &lt;h4&gt; {gameState.victory ? `Done!  Time: ${gameState.endTime}ms` : null}&lt;/h4&gt;
       &lt;input value={userText} onChange={updateUserText} /&gt;
       &lt;hr /&gt;
       {
         SNIPPETS.map((SNIPPET, index) =&gt; (
           &lt;button onClick={chooseSnippet(index)} key={index}&gt;
           {SNIPPET.substring(0,10)}...
           &lt;/button&gt;
         ))
       }
      &lt;/div&gt;
    )
  }
  
  export default App;
  </code></pre>
  
  <p>This is the App Css file </p>
  
  <pre><code>css
  .App {
    text-align: center;
  }
  
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
    height: 40vmin;
    pointer-events: none;
  }
  
  .App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
  }
  
  .App-link {
    color: #61dafb;
  }
  
  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  </code></pre>
  
  <p>This is the initial game state javascript file. </p>
  
  <pre><code>const INITIAL_GAME_STATE = { victory: false, startTime: null, endTime: null};
  const [snippet, setSnippet]= useState('');
  const [userText, setUserText] = useState('');
  const [gameState, setGameState] = useState(INITIAL_GAME_STATE);
  
  setSnippet(SNIPPETS[snippetIndex]);
  setGameState({...gameState, startTime: new Date().getTime() });
  </code></pre>
  
  <p>Errors Shown: 
  ./src/App.js
    Line 5:  'INITIAL_Game_State' is not defined  no-undef
    Line 7:  'SNIPPETS' is not defined            no-undef
    Line 7:  'snippetIndex' is not defined        no-undef</p>
  
  <p>It should show the website with the game state and other text as written in the javascript code.</p>