CODEWITHSUNDEEP
javascriptreactjsecmascript-6
user10248088
user10248088

Reputation: 75

In React, method returning cannot read property 'target' of undefined

The parent component contains the method handleBlur and the child component has an input field which triggers the method handleBlur in the parent. Every time when I type something to the field, it's always failing and returning me the error "TypeError: Cannot read property 'target' of undefined "

method in parent:

handleBlur = e => {
  console.log("e: ", e);
  const { name, value } = e.target;
}

input field in child:

<Input
  id="amount"
  title="Required: Amount"
  name="amount"
  value={amount}
  handleBlur={this.props.handleBlur}
  handleChange={(name, value) =>
    this.props.handleChangeOnDollarAmount(name, value)
  }
/>

Upvotes: 0

Views: 362

Answers (1)

Brian Thompson
Brian Thompson

Reputation: 14375

The blur event does not fire until you leave the field. Since the error is happening "Every time when I type something to the field", the issue is most likely not in the handleBlur function.

It appears that your handleChange has an incorrect signature.

Change it to accept an event, and use the event to get the name and value properties.

handleChange={(e) => {
  this.props.handleChangeOnDollarAmount(e.target.name, e.target.value)
}}

Upvotes: 1

Related Questions