CODEWITHSUNDEEP
javascriptreactjsreact-native
Tushar Kumawat
Tushar Kumawat

Reputation: 661

handleChange is not defined no-undef in react

handleChange is not defined no-undef showing this when rum=n page in react

function ApplicationCategories() {
      const options = ["Africa", "America", "Asia", "Europe"];
      handleChange = (event, value) => {
        console.log(value);
      };
      return (
        <SecureLayout>
            <ReactSelectMaterialUi
              style={{ width: 100 }}
              value="Europe"
              options={options}
              onChange={this.handleChange}
            />
        </SecureLayout>
      );
    }

Upvotes: 1

Views: 5279

Answers (3)

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

onChange={handleChange} not onChange={this.handleChange} because you want to pass the reference of a function that is defined in the function body. this.something is used when you want to access a class property.

handleChange = (event, value) => {
   console.log(value);
};

The above snippet is used to declare methods in a class.

Since you want to declare a function inside a function's body it should be

const handleChange = (event, value) => {
   console.log(value);
};

Upvotes: 1

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7166

You are using a functional component. It is also called stateless component.

So the method should be defined using const/let. And while calling don't use this.

function ApplicationCategories() {
      const options = ["Africa", "America", "Asia", "Europe"];
      
      const handleChange = (event, value) => {
        console.log(value);
      };

      return (
        <SecureLayout>
            <ReactSelectMaterialUi
              style={{ width: 100 }}
              value="Europe"
              options={options}
              onChange={handleChange}
            />
        </SecureLayout>
      );
    }

Upvotes: 1

mgm793
mgm793

Reputation: 2066

When you use react functions you need to declare inner function with const or let. And you don't need to use this then. It's not a class anymore.

function ApplicationCategories() {
      const options = ["Africa", "America", "Asia", "Europe"];
      const handleChange = (event, value) => {
        console.log(value);
      };
      return (
        <SecureLayout>
            <ReactSelectMaterialUi
              style={{ width: 100 }}
              value="Europe"
              options={options}
              onChange={handleChange}
            />
        </SecureLayout>
      );
    }

Upvotes: 1

Related Questions