Manipulating dates momentjs in react/javascript

Question

Auto-filling other date-fields based one the first one.

1. I have array of 12 indexes "listOfPaysIndexes", I am using this array to iterate through her and render 12 DateInput fields.

2. You can click on each of this fields and pick Date.

3. When you pick date in first DateInput all the others DateInputs should be auto-filled with the next month.

Current behaviour is: that when you pick firstDate you get same Date on all other fields.

Expected behaviour is: that when you pick firstDate every next filed get the next mounth date auto-fielled.

• Problem is when I choose 6 November 2018 I get in first field 6 Nov, and in the all others fields I get 6 December 2018.

• But there should continue switching to the next mounths and displying next months dates.

• I think this line of code is problem: return firstDate.add(1, 'months').format('MM/DD/YYYY')

Code sample:

fillingDatesArray = (data, values, periodType, periodLength) => {
  let listOfPaysIndexes = []
  listOfPaysIndexes = This array have 12 indexes

if (periodType === 'monthly') {
  values.ending_period_monthly = listOfPaysIndexes.map(value => {
    let firstDate = new Date(data.value)
    return firstDate.add(1, 'months').format('MM/DD/YYYY')
  })
}

Here is screenshot of that DateInputs:

Answer 1

Try cloning your moment date in the map so each value is not the same reference to the same moment object:

let firstDate = moment(data.value)
...
return firstDate.clone().add(1, 'months').format('MM/DD/YYYY')

instead of:

return firstDate.add(1, 'months').format('MM/DD/YYYY')