Using react-datepicker in react-data-grid compoent

Question

I am using react-data-grid component. It provides a grid structure with edit and lot more options. When we click on each cell, we are able to edit the content of the cell. In my project, I have a situation like when the date column is focused I want to bind a UI where the user can able to select the date.for that, I have used react-datepicker component. I am able to give react-datepicker component as a formatter in the date column option. I can able to change the date in the react datepicker component, but that is not updating the cell value (when you click on the console data button you can able to see the changes have been updated or not).so guys help me how I can update the cell value when a different date is selected in the react-datepicker component. It happening automatically when the value is changed in other cells.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import DatePicker from 'react-datepicker';
import moment from 'moment';


//helper to generate a random date
function randomDate(start, end) {
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
}

//helper to create a fixed number of rows
function createRows(numberOfRows){
  var _rows = [];
  for (var i = 1; i < numberOfRows; i++) {
    _rows.push({
      id: i,
      task: 'Task ' + i,
      startDate: randomDate(new Date(2015, 3, 1), new Date())
    });
  }
  return _rows;
}

//function to retrieve a row for a given index
var rowGetter = function(i){
  return _rows[i];
};

//renders react datepicker component
var ExampleDate = React.createClass({
  displayName: 'Example',

  getInitialState: function() {
    return {
      startDate:moment(this.props.value,"MM-DD-YYYY")
    };
  },

  consoleDate:function(){
      console.log(this.state.startDate);
  },

  handleChange: function(date) {
    this.setState({
      startDate: date
    });
  },

  render: function() {
    return (
     <div>
       <DatePicker selected={this.state.startDate} onChange={this.handleChange} />
     </div>
    );

  }
});

//Columns definition
var columns = [
    {
      key: 'id',
      name: 'ID',
      width: 80
    },
    {
      key: 'task',
      name: 'Title',
      editable : true,
      width:100
    },
    {
      key: 'startDate',
      name: 'Start Date',
      editable : true,
      formatter:<ExampleDate />,
      width:100
    }
]

var Example = React.createClass({

  getInitialState : function(){
    return {rows : createRows(5)}
  },

  rowGetter : function(rowIdx){
    return this.state.rows[rowIdx]
  },

  handleRowUpdated : function(e){
    //merge updated row with current row and rerender by setting state
    var rows = this.state.rows;
    Object.assign(rows[e.rowIdx], e.updated);
    this.setState({rows:rows});
  },

  output:function(){
    console.log(this.state.rows);
  },

  render:function(){
    return(
       <div>
          <ReactDataGrid
          enableCellSelect={true}
          columns={columns}
          rowGetter={this.rowGetter}
          rowsCount={this.state.rows.length}
          minHeight={200}
          onRowUpdated={this.handleRowUpdated} />
          <button onClick={this.output} > Console data </button>
       </div>
    )
  }

});

ReactDOM.render(<Example />, document.getElementById('container'));

Answer 1

I encounter some issues when I tried to reproduce. Anyway, after some changes I works fine: - I removed the random date to avoid "Invalid Date" - I fixed the formatter like this

formatter: ({value}) => <ExampleDate value={value} />

All works fine, but I always get the warning, because of the key props of your columns :(