How to fix ' "X" is not defined no-undef' error in React.js

Question

I am following an online tutorial to learn React and have encountered an error

./src/components/counter.jsx Line 24:  'product' is not defined  no-undef 

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.

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.

I have had this error in the past but usually that was just because I had a typo (eg 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.

I can see no difference between my code to what is in the video.

===index.js===

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
//import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import Counters from "./components/Counters";

ReactDOM.render(<Counters />, document.getElementById("root"));
serviceWorker.unregister();

===counter.jsx===

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  handleIncrement = product => {
    console.log(product);
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement(product)} //this is the line with the error
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

===counters.jsx===

import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  state = {};
  render() {
    return (
      <div>
        <Counter />
        <Counter />
        <Counter />
        <Counter />
      </div>
    );
  }
}

export default Counters;

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.

What actually happens is that when I go to the page it displays the following:

Failed to compile

./src/index.js

Cannot find file: 'Counters.jsx' does not match the corresponding name on disk: './src/components/counters.jsx'.
This error occurred during the build time and cannot be dismissed.

Answer 1

onClick={() => this.handleIncrement(product)}

At the point where this executes, product does not exist. The variable hasn't been declared or assigned anywhere, hence the not defined message.

This message is the product of a linter like eslint , which:

is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Linters may be configured to emit warnings and errors, and when used as part of a build or compilation process, may be configured to abort compilation.

I'm not sure what the intent is here, but you could do onClick={this.handleIncrement} instead and it will increment your counter.

Answer 2

Even I was facing the same error as mentioned above. I am confused where this product parameter is coming from. However, I tried this step and it worked:

onClick={() => this.handleIncrement({})

Just pass an empty object and it will work.

Hope this helps.

Answer 3

you are passing parameter as a variabe which is not defined.

try this

onClick={() => this.handleIncrement('product')}

or declare product and assing it a value

render() {
let product = Something
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement(product)} //this is the line with the error
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

Answer 4

The product that you are passing in the following code is not defined.

onClick={() => this.handleIncrement(product)}

Try this onClick={this.handleIncrement} Many have already suggested this.

The file path we provide while importing is case sensitive. So you can modify the import in your index.js file, try this

import Counters from "./components/counters";

for import Counters from "./components/Counters";

Here is the link to complete source code of counter-app.

Answer 5

Problem:

'onNumberClick' is not defined no-undef

HTML Code:

<PlayNumber
  number={number} 
  TheOnClick={onNumberClick}
   />

Component:

const PlayNumber = (props) => (
   <button className="number" onClick={() => onNumberClick(props.number)}>
   {props.number}
   </button> );
  

Solution:

When you pass a delegate/function to a component you need to use the props name TheOnClick to invoke it, you'll get the error if you try the name of the delegate/function in this case onNumberClick :

<button className="number" onClick={() => props.TheOnClick(props.number, props.status)} 

Answer 6

I'm not sure, but try to use the same case for the file name. The class is called Counters, the file is called counters. Make the C uppercase in the file name.

Answer 7

尝试在您调用的函数内定义 product 变量。

<button onClick={product => this.handleIncrement(product)} className="btn btn-secondary btn-sm">Increment</button>