id undefined in onChange event

Question

Using react datepicker , I am trying to get the id of the clicked component

<DatePicker
id={cellData.column}
selected={DatePickerDate}
onChange={this.onDateRangePickerChange}
className='form-control'
                    />

In my click handler the event being passed is a moment date object, so event.currentTarget is undefined.

onDateRangePickerChange: function(event, picker){

        var localRowDataStack = _.cloneDeep(this.state.rowDataStack);
        localRowDataStack[event.currentTarget.id] = picker.startDate.format(appConfig.getKey('dateFormat'));
        this.setState({
            rowDataStack: localRowDataStack,
            isOmitReRender: false
        });

},

How can I get the id of the clicked datepicker?

Answer 1

You can as well extend onDateRangePickerChange to accept id and just pas it there like this:

<DatePicker
    id={cellData.column}
    selected={DatePickerDate}
    onChange={(e, p) => this.onDateRangePickerChange(e, p, cellData.column)}
    className='form-control'/>

Answer 2

You can set id as first argument to onDateRangePickerChange with .bind , and thus avoid add id as DatePicker attribute

onDateRangePickerChange: function (column, date) {
  console.log(column, date);
},

<DatePicker
  selected={ DatePickerDate }
  onChange={ this.onDateRangePickerChange.bind(this, cellData.column) }
  className="form-control"
/>;

Answer 3

You could try doing this way:

onDateRangePickerChange: function(event){

        var id = event.target.id;  // ID from the element
        var localRowDataStack = _.cloneDeep(this.state.rowDataStack);
        localRowDataStack[id] = picker.startDate.format(appConfig.getKey('dateFormat'));
        this.setState({
            rowDataStack: localRowDataStack,
            isOmitReRender: false
        });
},

You could see more examples/responses here: React.js: Identifying different inputs with one onChange handler