CODEWITHSUNDEEP
javascriptreactjs
Ahmed Hakki
Ahmed Hakki

Reputation: 11

Calling 2 functions in an onchange input in reactjs and i face this error TypeError: Cannot read property 'target' of undefined

im trying to call tow onChange functions in an input onchange attribute here is my code my goal is to get the date from a date picker and send it by an api 

constructor(props) {
super(props);

this.state = {
  date: '',

};

this.onChange = this.onChange.bind(this);
this.onDateChange = this.onDateChange.bind(this);
this.twoCalls = this.twoCalls.bind(this);}


onDateChange(date, dateString) {
console.log(date, dateString);
}

onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}

twoCalls = e => {
this.onDateChange()
this.onChange()
}

render(){
return(
         <div>

               <DatePicker
                id="date"
                placeholder="Date"
                name="date"
                className="form-control"
                required
                autocomplete="off"
                onChange={this.twoCalls} /> //here is the problem
      </div>
  )}

TypeError: Cannot read property 'target' of undefined


  102 | }
  103 | 
  104 | onChange(e) {
> 105 |   this.setState({ [e.target.name]: e.target.value });
  106 | }
  107 | 



  274681 | 
  274682 | _this.twoCalls = function (e) {
  274683 |   _this.onDateChange();
> 274684 |   _this.onChange();
         |         ^  274685 | };
  274686 |

Upvotes: 0

Views: 37

Answers (2)

miraclesInMe
miraclesInMe

Reputation: 425

You are Not sending the event to that method while calling.

You just need to call this.onChange(e) method to get out of this error.

Upvotes: 0

Dupocas
Dupocas

Reputation: 21317

You need to pass the event (date) to both handlers. Also onDateChange expects another argument called dateString

twoCalls = e => {
    this.onDateChange(e, dateString/* ? */)
    this.onChange(e)
}

Upvotes: 2

Related Questions