TypeError: Cannot read property 'validateName' of undefined

Question

I'm new in ReactJs. In my application, I have inserted the following code to validate textArea, but when I type on it, it throws following error.

NewBrand.js:67 Uncaught TypeError: Cannot read property 'validateName' of undefined
        at handleNameChange (NewBrand.js:67)
        at TextArea._this.handleTextareaChange (TextArea.js:94)
        at HTMLUnknownElement.callCallback (react-dom.development.js:100)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
        at Object.invokeGuardedCallback (react-dom.development.js:187)
        at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
        at executeDispatch (react-dom.development.js:461)
        at executeDispatchesInOrder (react-dom.development.js:483)
        at executeDispatchesAndRelease (react-dom.development.js:581)
        at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)

My code looks like follows:

    handleNameChange(event) {
        const value = event.target.value;
        this.setState({
        name: {
            text: value,
            ...this.validateName(value)
        }
    });

    }

    isFormInvalid() {
        if(this.state.name.validateStatus !== 'success') {
            return true;
        }
    }

  validateName = (nameText) => {
            if(nameText.length === 0) {
                return {
                    validateStatus: 'error',
                    errorMsg: 'Please enter the Brand name!'
                }
            } else if (nameText.length > POLL_QUESTION_MAX_LENGTH) {
                return {
                    validateStatus: 'error',
                    errorMsg: `Name is too long (Maximum ${POLL_QUESTION_MAX_LENGTH} characters allowed)`
                }
            } else {
                return {
                    validateStatus: 'success',
                    errorMsg: null
                }
            }
        }

Please hepl me to resolve this issue

Actual code is: this.setState({ name: { text: value, ...this.validateName(value) } }); — chk.buddi, Oct 20 '18 at 05:45

score 1 · Accepted Answer · edited Oct 20 '18 at 06:31

1

When you're hooking up the change handler (probably in your render method) your jsx looks something like this

<textarea onChange={ this.handleNameChange } ...

Change it to

constructor(props){
  super(props);
  this.handleNameChange = this.handleNameChange.bind(this);
}

<textarea onChange={this.handleNameChange} ...

This ensures that this still refers to the Component object when the change callback runs.

Please note you are not recommended to bind the function directly in render or anywhere else in the component except constructor. Because binding in render causes a new function to be created in bundle file every time the component renders so we are not recommended to do that.

Like wise wherever you have event handler functions bind them in constructor and use the reference like mentioned above

edited Oct 20 '18 at 06:31

Hemadri Dasari

32,666
37
119
162

answered Oct 20 '18 at 05:51

Jonas Høgh

10,358
1
26
46

2

Never bind the function directly in render. You are not recommended to do that. Always do binding only in constructor – Hemadri Dasari Oct 20 '18 at 05:55
Also, you can wrap your function by anonymous function like ` this.handleNameChange() } ... ` – webHasan Oct 20 '18 at 05:57
Now I'm getting error at following line. Am I doing wrong to bind data? my code is :handleSubmit(event) { event.preventDefault(); const brandData = { name: this.state.name.text }; it threows 'TypeError: Cannot read property 'state' of undefined' – chk.buddi Oct 20 '18 at 06:14
1

Sounds like you also need to bind your submit handler – Jonas Høgh Oct 20 '18 at 06:17
Can you give me an example? – chk.buddi Oct 20 '18 at 06:22
@chk.buddi Looks like you are having many issues in your component so please share the complete component code instead of piece of it so that we can take a look and correct the code if there are any mistakes we find – Hemadri Dasari Oct 20 '18 at 06:25
1

@think-twice Thanks for the edit. Since we're nitpicking performance, won't the arrow function you've added in render create a new closure on each call? – Jonas Høgh Oct 20 '18 at 06:27
1

@JonasH You are welcome. My bad yes that will create a new function to be created every time it renders. I removed that in your answer. This thread has detailed answer https://stackoverflow.com/questions/52031147/react-which-is-recommended-arrow-or-normal-function – Hemadri Dasari Oct 20 '18 at 06:34

TypeError: Cannot read property 'validateName' of undefined

1 Answers1