updating state object property - date, based on previous value

Question

I want to increment date with each button click (next day each click). How to update object state property and increment date value, properly???

const {useState} = React;

const DateComponent = () => {
  const [date, setDate] = useState({
    currDate: new Date().toLocaleDateString(),
    active: true
  });

  const nextDate = () => {
    setDate({
      ...date,
      currDate: date.currDate.setDate(date.currDate.getDate() + 1)
    });
  };

  return (
    <div>
      <span>{date.currDate}</span>
      <button onClick={nextDate}>Next Day</button>
    </div>
  );
}




ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <DateComponent />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Does this answer your question? ["Good" way how to update state (from its previous value) in React](https://stackoverflow.com/questions/69081468/good-way-how-to-update-state-from-its-previous-value-in-react) — Suresh, Jul 18 '22 at 19:02

Kavindu Vindika · Accepted Answer · 2022-07-18T18:57:48.223

1

Keep currDate state as a Date object and make it a string during component rendering to view it as follows.

Create a temporary Date object tempDate to clone the current date and then do the update.

const DateComponent = () => {
  const [date, setDate] = useState({
    currDate: new Date(),
    active: true,
  });

  const nextDate = () => {
    setDate(currentData => {
      const tempDate = new Date(currentData.currDate.getTime());
      tempDate.setDate(currentData.currDate.getDate() + 1);

      return {
        ...currentData,
        currDate: tempDate,
      };
    });
  };

  return (
    <div>
      <span>{date.currDate.toLocaleDateString()}</span>
      <button onClick={nextDate}>Next Day</button>
    </div>
  );
};

edited Jul 18 '22 at 18:57

answered Jul 18 '22 at 18:39

Kavindu Vindika

2,449
1
13
20

it returns "date.currDate.toLocaleDateString is not a function" – Adrian Jul 18 '22 at 18:43
Sorry for the error I made. Please check the updated answer @Adrian – Kavindu Vindika Jul 18 '22 at 18:58
1

Btw, why do we need to create a temp obj and then clone? – Adrian Jul 18 '22 at 19:38
In react we shouldn't directly change the state object. It should only be changed through `setState` function. That's why I just cloned it to the temp obj and then do the change to it before updating the state. Please refer this https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really – Kavindu Vindika Jul 19 '22 at 03:08

score 0 · Answer 2 · answered Jul 18 '22 at 18:42

The best way to do it, its using the preview object for that state when you use setDate you can access to that value in the function, this is how you can use it

const nextDate = () => {
  setDate(prev => {
    const newDate = new Date(prev.currDate)
    newDate.setDate(newDate.getDate() + 1)
    return {
      ...prev,
      currDate: newDate.toLocaleDateString(),
    };
  });
};

updating state object property - date, based on previous value

2 Answers2