CODEWITHSUNDEEP
javascriptreactjs
Alexey K
Alexey K

Reputation: 6723

Cannot read property 'target' of undefined

In my render method I have component

<DatePicker selected={this.state.startDate} onChange={this.handleChange()}/>

handleChange is following

handleChange: function (e) {
  var that = this;
  console.log(e.target.value)
  return function () {
    that.setState({
      startDate: e.target.value
    });
  }
},

By when I try to load page with this component, I get error

Cannot read property 'target' of undefined

What am I doing wrong ?

Upvotes: 17

Views: 73162

Answers (6)

Mohi Dev
Mohi Dev

Reputation: 3386

You can fix it like this

function handleChange(event) {
    const value =  event.taget.value;
}

<input onChange={handleChange} />

not this

<input onChange={handleChange()} />

Upvotes: 0

Andreas Bigger
Andreas Bigger

Reputation: 5550

If you are passing event using an arrow function, you should try the following:

onChange={(e) => handleChange(e)}

Upvotes: 4

Matthew Barbara
Matthew Barbara

Reputation: 3962

The problem is that you are invoking the function in this line:

onChange={this.handleChange()}

All you have to do is simply pass the function as a value to onChange without invoking it.

onChange={this.handleChange}

When you use parenthesis you'd be invoking a function/method instead of binding it with an event handler. Compare the following two examples:

//invokes handleChange() and stores what the function returns in testA.
const testA = this.handleChange()

vs

//stores the function itself in testB. testB be is now a function and may be invoked - testB();
const testB = this.handleChange

Upvotes: 41

Master Ace
Master Ace

Reputation: 79

Changing this onChange={this.handleChange} to this onChange={() => this.handleChange()} may also help if all the suggestions above don't work.

Upvotes: 0

bennygenel
bennygenel

Reputation: 24670

You are executing function rather than passing it as a prop.

You need to change this,

 onChange={this.handleChange()}

with this,

 onChange={this.handleChange}

Upvotes: 0

Adeel Imran
Adeel Imran

Reputation: 13966

Simply do this

<DatePicker selected={this.state.startDate} onChange={this.handleChange}/>

It will pass the event param of the function automatically. The rest of your code is okay.

Upvotes: 0

Related Questions