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>

Answer 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>
  );
};

Answer 2

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(),
    };
  });
};