DevOps | Cloud | Analytics | Open Source | Programming





How To Fix - This is Undefined Inside a Component Function in Vue.js or React.js ?


In this post, we will explore How To Fix - "This is Undefined" Inside a Component Function in Vue.js or React.js. Error Log

s
this is undefined



This is Undefined



React: 'this.state' is undefined



cannot read props of undefined
Before we proceed, let's do some primitive sanity checks.  

Primitive Check:

Let's do couple of quick checks -

  • Which React-Router and React-Router-Dom version are you using ? Use below commands to check that.
It is advised to keep same react-router and react-router-dom version.


npm info react-router-dom version



window.React.version



import React from 'react';
console.log(React.version);
  • Have you tried running the app in Incognito mode (to avoid caching) ?
 

  • Understand about the scoping in a function. A scope is an area where a variable exists. Most of variables are restricted to the function, class or module. This is a general scoping thing.
But there is something called lexical" scoping which means - the scope is determined based on how you write the code. Arrow functions use lexical scoping. Regular and shorthand functions do not use lexical scoping. And this lexical scoping thing affects "this" in the functions and renders it is as defined or undefined.   Assuming you are done with the above checks, let's go to the next steps.  

Solution ;

  • Where are you using "this" ? Is it used inside of an arrow function ?
Arrow functions use the outer scope as their own scope. If used within an arrow functions, the value of "this" is taken - from the scope - where the arrow function was declared. So in such a case, if that happens to be the Upper level in the module\program, then "this" will take up the value of undefined. In an arrow function, this does not refer to the owner of the function - in fact the arrow function takes this from it's context. So if you try to access this from inside of an arrow function - which resides on a component - it will throw an error because this doesn't exist!  

  • Where are you using "this" ? Is it used inside of a function such as function App() {}  ?
In such a case also "this" will take up the value of undefined. So you should not use "this" in functional component. Rather access the props directly and use hooks for state.  

  • You have to bind "this" to your class method.
So for that use a public class field arrow function on the class.


func = () => { ... }



class Toggle extends React.Component {
  constructor(props) {
  super(props);
  this.state = {isToggleOn: true};

  // This binding is necessary to make \`this\` work in the callback 
  this.handleClick = this.handleClick.bind(this); 
}

handleClick() { 
  this.setState(prevState => ({ 
     isToggleOn: !prevState.isToggleOn 
  })); 
}

render() {
  return (
    <button onClick={this.handleClick}> 
      {this.state.isToggleOn ? 'ON' : 'OFF'}
    </button>
  );
 }
}
 

  • Are you using fetch ?
Within the scope of fetchData(), "this" is set to component(Vue) - as it is a regular function. Note the arrow functions uses the outer scope as their own scope. Hence the arrow functions will also set "this" to Vue component. This is why , we can access Vue component through "this".   Hope this will help to fix the issue.    

Other Reads -

   


props undefined react functional component ,this is undefined react function component ,this in functional component ,react class component function is not defined ,why this is undefined in event handler ,event is undefined react ,function is not defined react ,this is undefined in componentdidmount ,This is Undefined ,React: 'this.state' is undefined ,cannot read props of undefined



props undefined react functional component ,this in functional component ,react class component function is not defined ,why this is undefined in event handler ,function is not defined react ,React: 'this.state' is undefined ,cannot read props of undefined ,this is undefined ,this is undefined react ,this is undefined in function javascript ,this is undefined in angular ,this is undefined typescript ,this is undefined in arrow function ,this is undefined inside foreach ,this is undefined in vue js ,this is undefined inside function , ,this is undefined react function component ,event is undefined react ,typeerror event is undefined react ,onclick undefined react ,react onchange this undefined ,this.state is undefined ,this is undefined in componentdidmount ,this in react ,typeerror this is undefined