Function Is Not Defined Error in React

Question

I am trying to call a function from componentDidMount which sets the State but keep coming across an error of

Uncaught ReferenceError: setPanelState is not defined

Below is the code...

export default class Patient extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);

    this.state = {
     PATIENT: [],
     COMPPROPS: [],
    };

    this.setPanelState = this.setPanelState.bind(this);
  }

    setPanelState(activity) {
          this.setState({COMPPROPS: [{compName:'Overview', compState:'Edit'}]});
    }

    componentDidMount() {   
       //handles chat commands and if the command is update patient the Overview panel should change to editable
       this.directLine.activity$
        .filter(function (activity) {
          return activity.type === 'event' && activity.value === 'Update Patient';
       })
       .subscribe(function (activity) {
         setPanelState(activity);   
       })
  }

I have tried make setPanelState a function outside of the class as opposed to a method but I get an error there as well.

Any thoughts?

João Cunha · Accepted Answer · 2017-11-30 12:02:23Z

2

Since you're using ES6 classes I assume you have it all set up.

Use arrow functions that bind this automatically

To learn more about arrow functions see this

.subscribe((activity) => {
    this.setPanelState(activity);   
})

Your component would look like this:

 export default class Patient extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);

    this.state = {
     PATIENT: [],
     COMPPROPS: [],
    };

    this.setPanelState = this.setPanelState.bind(this);
  }

    setPanelState(activity) {
          this.setState({COMPPROPS: [{compName:'Overview', compState:'Edit'}]});
    }

    componentDidMount() {   
       //handles chat commands and if the command is update patient the Overview panel should change to editable
       this.directLine.activity$
        .filter((activity) => {
          return activity.type === 'event' && activity.value === 'Update Patient';
       })
       .subscribe((activity) => {
         this.setPanelState(activity);   
       })
  }

answered Nov 30, 2017 at 12:02

João Cunha

10.3k4 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jgoraya Over a year ago

This appears to have done it! I seem to struggle with arrow functions and the use of this. Appreciate the help!

simbathesailor · Accepted Answer · 2017-11-30 12:02:06Z

0

Use this.setPanelState(activity) and remember to maintian the context .As you are non ES6 arraow function . save the context outside var that=this and access that variable inside

answered Nov 30, 2017 at 12:02

simbathesailor

3,6852 gold badges22 silver badges30 bronze badges

Comments

ismnoiet · Accepted Answer · 2017-11-30 12:04:00Z

0

In your componentDidMount method call setPanelState using this.setPanelState

you can also use a better format:

.subscribe(this.setPanelState)

If you put setPanelState outside the class and call it, it won't work, unless it is defined inside another class where you can use setState.

answered Nov 30, 2017 at 12:04

ismnoiet

4,16926 silver badges30 bronze badges

Comments

Yaniv Peretz · Accepted Answer · 2017-11-30 12:16:59Z

0

change to

 this.setPanelState(activity)

at the end.

answered Nov 30, 2017 at 12:16

Yaniv Peretz

1,1682 gold badges13 silver badges22 bronze badges

1 Comment

jgoraya Over a year ago

I have tried this but i get the error "Uncaught TypeError: this.setPanelState is not a function"

Collectives™ on Stack Overflow

Function Is Not Defined Error in React

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related