• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

92
Vistas
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>

8 months ago · Santiago Gelvez
2 Respuestas
Responde la pregunta

0

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

8 months ago · Santiago Gelvez Denunciar

0

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(),
    };
  });
};
8 months ago · Santiago Gelvez Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.