modifying array of objects in state with loop

February 28, 2022

Hi I want to be able to modify an array of objects in state using a for loop and would like to know the best way of going about this!

const [ paymentData, setPaymentData ] = useState([
  {
    paymentN: 'First Payment',
    paymentDate: 'March 07'
  },
  {
    paymentN: 'Second Payment',
    paymentDate: 'March 24'
  },
  {
    paymentN: 'Third Payment',
    paymentDate: 'April 8th',
  },
  {
    paymentN: 'Fourth Payment',
    paymentDate: 'April 21st'
  }
])

Specifically I want to modify the dates in each object in my paymentData state array.
My intended final result would something like

{
paymentN: 'First Payment',
paymentDate: 'Mon Mar 14 2022 07:17:05 GMT-0400'
},
{
paymentN: 'Second Payment',
paymentDate: 'Mon Mar 28 2022 07:17:05 GMT-0400'

},
{
paymentN: 'Third Payment',
paymentDate: 'Mon Apr 11 2022 07:17:05 GMT-0400'
},
{
paymentN: 'Fourth Payment',
paymentDate: 'Mon Apr 25 2022 07:17:05 GMT-0400'
}

My function is intended to get the current date, increment it by 2 weeks and then set the new date at object[i]. My idea was to take the previous state data create a new array of objects with the modified date and set it to state again.

  const createPaymentPlan = ( amount, e )  => {
    e.preventDefault();
    const currentDate = new Date()
    var obj = []
    for ( let i = 0 ; i < 4 ; i ++ ) {
      
      currentDate.setDate(currentDate.getDate()+14)
      const updatedPaymentData = paymentData[i]
      updatedPaymentData.paymentDate = currentDate
      obj.push(updatedPaymentData)
      
    }

    setPaymentData(obj)
  }

When I tried this my final state looks like this, however when I console.log the updatedPaymentData variable it is set to the correct incremented date in each loop.

>Solution :

Each object is referring to the same date object causing all of them to have the same date after the loop. You can create a new Date in each iteration to fix this.

const paymentData = [{
    paymentN: 'First Payment',
    paymentDate: 'March 07'
  },
  {
    paymentN: 'Second Payment',
    paymentDate: 'March 24'
  },
  {
    paymentN: 'Third Payment',
    paymentDate: 'April 8th',
  },
  {
    paymentN: 'Fourth Payment',
    paymentDate: 'April 21st'
  }
]
const currentDate = new Date()
var obj = []
for (let i = 0; i < 4; i++) {

  currentDate.setDate(currentDate.getDate() + 14)
  const updatedPaymentData = paymentData[i]
  updatedPaymentData.paymentDate = new Date(currentDate);
  obj.push(updatedPaymentData)
}

console.log(obj)

It’s better to make sure that the state’s values are of the same type/format across renders so you can do this conversion and use the converted array as the initial state.

// this can be defined somewhere outside the component
const formatPaymentData = (paymentData) => {
  return paymentData.reduce(
    ((currentDate) => (formatted, curr) => {
      currentDate.setDate(currentDate.getDate() + 14);
      formatted.push({ ...curr, paymentDate: new Date(currentDate) });
      return formatted;
    })(new Date()),
    []
  );
};

const [paymentData, setPaymentData] = useState(
  formatPaymentData([
    {
      paymentN: 'First Payment',
      paymentDate: 'March 07',
    },
    {
      paymentN: 'Second Payment',
      paymentDate: 'March 24',
    },
    {
      paymentN: 'Third Payment',
      paymentDate: 'April 8th',
    },
    {
      paymentN: 'Fourth Payment',
      paymentDate: 'April 21st',
    },
  ])
);