Function undefined inside a component

Question

im trying reactjs and i got an undefined and i dont kow why. The code is really simple but maybe i didnt get something ?!

  isMailValid(mail) {
    const valid_mail = RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
    console.log("res => " + valid_mail.test(mail));
    return valid_mail.test(mail);
  }

  isMailOk() {
    var res = this.isMailValid(this.state.mail)
    if (res === true)
      return (<p class="false">invalid mail</p>);
    return (<p class="good">Mail Ok</p>); 
  }

I got 'isMailValid' is not defined no-undef. Thx for help

valid_mail is a string. it doesn't have test. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Federkun
– Federkun, Commented Dec 18, 2018 at 19:50
To fix your code, it needs to be const valid_mail = RegExp("[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"); — technogeek1995
– technogeek1995, Commented Dec 18, 2018 at 19:56
thanks it solves a problem but i cant get what i want. there is no message under the input. (I edit the code) — Jim
– Jim, Commented Dec 18, 2018 at 19:59

sedders123 · Accepted Answer · 2018-12-18 19:57:34Z

1

The function is undefined because it is not in the same scope as the function calling it. To access it you'll have to prefix the call with this. to tell React where to find the function.

isMailOk() {
    if (this.isMailValid(this.state.mail) === true)
      return (<p class="false">Mail invalid</p>);
    return (<p class="good">Mail Ok</p>); 
  }

You'll also have to bind your custom function to this. You can do that by placing this.isMailOk = this.isMailOk.bind(this); in the constructor. You'll have to do that with both of your custom functions. Functions such as render don't require being bound to this because they are inherited when you extend your class from React.Component. You can read more about binding to this in the docs.

edited Dec 18, 2018 at 19:57

answered Dec 18, 2018 at 19:51

sedders123

8211 gold badge12 silver badges21 bronze badges

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

1 Comment

technogeek1995 Over a year ago

I'd encourage reading through the docs for binding functions to the class. You can also do it through the arrow syntax (=>). If you're using create-react-app, the support is out of the box. You don't have to bind in the constructor if your functions use the arrow syntax.

Collectives™ on Stack Overflow

Function undefined inside a component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related