CODEWITHSUNDEEP
javascriptreactjs
Adrian
Adrian

Reputation: 86

updating state object property - date, based on previous value

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>

Upvotes: 1

Views: 454

Answers (2)

Kavindu Vindika
Kavindu Vindika

Reputation: 2737

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

Upvotes: 2

Jonathan Lopez
Jonathan Lopez

Reputation: 186

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

Upvotes: 0

Related Questions