React this is undefined inside a component function

Question

class PlayerControls extends React Component     constructor props        super props       this state           loopActive  false        shuffleActive  false               render         var shuffleClassName   this state toggleActive    player-control-icon active     player-control-icon       return          lt div className  player-controls  gt           lt FontAwesome           className  player-control-icon            name  refresh            onClick  this onToggleLoop            spin  this state loopActive            gt           lt FontAwesome           className  shuffleClassName            name  random            onClick  this onToggleShuffle            gt         lt  div gt                onToggleLoop event            this is undefined     lt --- here     this setState  loopActive   this state loopActive       this props onToggleLoop         I want to update loopActive state on toggle  but this object is undefined in the handler  According to the tutorial doc  I this should refer to the component  Am I missing something

User · Answer

If you are using babel  you bind  this  using ES7 bind operator https   babeljs io docs en babel-plugin-transform-function-bind auto-self-binding  export default class SignupPage extends React Component     constructor props        super props          handleSubmit e        e preventDefault          const data            email  this refs email value                render          const  errors    this props       return          lt div className  view-container registrations new  gt           lt main gt             lt form id  sign up form  onSubmit    this handleSubmit  gt               lt div className  field  gt                 lt input ref  email  id  user email  type  email  placeholder  Email     gt               lt  div gt               lt div className  field  gt                 lt input ref  password  id  user password  type  new-password  placeholder  Password     gt               lt  div gt               lt button type  submit  gt Sign up lt  button gt             lt  form gt           lt  main gt         lt  div gt

User · Answer

You should notice that this depends on how function is invoked ie  when a function is called as a method of an object  its this is set to the object the method is called on   this is accessible in JSX context as your component object  so you can call your desired method inline as this method   If you just pass reference to function method  it seems that react will invoke it as independent function    onClick  this onToggleLoop     Here you just passing reference  React will invoke it as independent function and this will be undefined  onClick      gt this onToggleLoop       Here you invoking your desired function as method of this  and this in that function will be set to object from that function is called ie  your component object

User · Answer

If you call your created method in the lifecycle methods like componentDidMount    then you can only use the this onToggleLoop   this onToogleLoop bind this  and the fat arrow function onToggleLoop    event    gt          The normal approach of the declaration of a function in the constructor wont work because the lifecycle methods are called earlier

User · Answer

in my case this was the solution             methodName    params    gt      your code here with this something

User · Answer

ES6 React Component doesn t auto bind methods to itself  You need to bind them yourself in constructor  Like this  constructor  props     super props        this state           loopActive  false        shuffleActive  false              this onToggleLoop   this onToggleLoop bind this

User · Answer

I ran into a similar bind in a render function and ended up passing the context of this in the following way    someList map function listItem         your code    this     I ve also used    someList map  listItem  index    gt       lt div onClick  this someFunction bind this  listItem     gt

User · Answer

You can rewrite how your onToggleLoop method is called from your render   method  render         var shuffleClassName   this state toggleActive    quot player-control-icon active quot     quot player-control-icon quot   return      lt div className  quot player-controls quot  gt       lt FontAwesome       className  quot player-control-icon quot        name  refresh        onClick   event    gt  this onToggleLoop event         spin  this state loopActive        gt            lt  div gt              The React documentation shows this pattern in making calls to functions from expressions in attributes

User · Answer

There are a couple of ways    One is to add  this onToggleLoop   this onToggleLoop bind this   in the constructor    Another is arrow functions  onToggleLoop    event    gt           And then there is onClick  this onToggleLoop bind this

User · Answer

In my case  for a stateless component that received the ref with forwardRef  I had to do what it is said here https   itnext io reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd  From this  onClick doesn t have access to the equivalent of  this    const Com   forwardRef  props  ref    gt      return  lt input ref  ref  onClick       gt   console log ref current      gt       To this  it works   const useCombinedRefs       refs    gt      const targetRef   React useRef      useEffect      gt        refs forEach ref   gt          if   ref  return        if  typeof ref      function   ref targetRef current        else ref current   targetRef current              refs      return targetRef    const Com   forwardRef  props  ref    gt      const innerRef   useRef     const combinedRef   useCombinedRefs ref  innerRef     return  lt input ref  combinedRef   onClick       gt   console log combinedRef  current      gt

User · Answer

Write your function this way   onToggleLoop    event    gt        this setState  loopActive   this state loopActive       this props onToggleLoop       Fat Arrow Functions     the binding for the keyword this is the same outside and inside the fat arrow function  This is different than functions declared with function  which can bind this to another object upon invocation  Maintaining the this binding is very convenient for operations like mapping  this items map x    this doSomethingWith x

[javascript] React: "this" is undefined inside a component function

Examples related to javascript

Examples related to reactjs

Examples related to this