title: How to fix ' "X" is not defined no-undef' error in React.js
body: <p>I am following an online tutorial to learn React and have encountered an error</p>
  <pre><code>./src/components/counter.jsx Line 24:  'product' is not defined  no-undef 
  </code></pre>
  <p>Could someone please explain what is going wrong in simple terms so I know how to fix this and can deal with it next time I encounter it.</p>
  <p>I have looked through all related questions I could find on stackoverflow and haven't been able to fix it, if I have missed one that answers this then please link it.</p>
  <p>I have had this error in the past but usually that was just because I had a typo (e.g. a capital instead of a lowercase) or did not import something correctly however that is not the case this time as far as I can tell.</p>
  <p>I can see no difference between my code to what is in the video.</p>
  <p>===index.js===</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import &quot;./index.css&quot;;
  //import App from &quot;./App&quot;;
  import * as serviceWorker from &quot;./serviceWorker&quot;;
  import &quot;bootstrap/dist/css/bootstrap.css&quot;;
  import Counters from &quot;./components/Counters&quot;;
  
  ReactDOM.render(&lt;Counters /&gt;, document.getElementById(&quot;root&quot;));
  serviceWorker.unregister();
  </code></pre>
  <p>===counter.jsx===</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  class Counter extends Component {
    state = {
      count: 0
    };
  
    handleIncrement = product =&gt; {
      console.log(product);
      this.setState({ count: this.state.count + 1 });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;span className={this.getBadgeClasses()}&gt;{this.formatCount()}&lt;/span&gt;
          &lt;button
            onClick={() =&gt; this.handleIncrement(product)} //this is the line with the error
            className=&quot;btn btn-secondary btn-sm&quot;
          &gt;
            Increment
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  
    getBadgeClasses() {
      let classes = &quot;badge m-2 badge-&quot;;
      classes += this.state.count === 0 ? &quot;warning&quot; : &quot;primary&quot;;
      return classes;
    }
  
    formatCount() {
      const { count } = this.state;
      return count === 0 ? &quot;Zero&quot; : count;
    }
  }
  
  export default Counter;
  </code></pre>
  <p>===counters.jsx===</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import Counter from &quot;./counter&quot;;
  
  class Counters extends Component {
    state = {};
    render() {
      return (
        &lt;div&gt;
          &lt;Counter /&gt;
          &lt;Counter /&gt;
          &lt;Counter /&gt;
          &lt;Counter /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Counters;
  </code></pre>
  <p>The expected output is that when I run it and go to the webpage it has buttons which I can press and counters beside them which will display how many times they have been pressed.</p>
  <p>What actually happens is that when I go to the page it displays the following:</p>
  <blockquote>
  <p>Failed to compile</p>
  <p>./src/index.js</p>
  <p>Cannot find file: 'Counters.jsx' does not match the corresponding name on disk: './src/components/counters.jsx'.<br>
  This error occurred during the build time and cannot be dismissed.</p>
  </blockquote>