Quiero incrementar la fecha con cada clic de botón (al día siguiente cada clic). ¿Cómo actualizar la propiedad del estado del objeto e incrementar el valor de la fecha correctamente?
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>Mantenga el estado currDate como un objeto Date y conviértalo en una cadena durante la representación del componente para verlo de la siguiente manera.
Cree un objeto de fecha temporal tempDate para clonar la fecha actual y luego realice la actualización.
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> ); };La mejor manera de hacerlo es usando el objeto de vista previa para ese estado cuando usa setDate puede acceder a ese valor en la función, así es como puede usarlo
const nextDate = () => { setDate(prev => { const newDate = new Date(prev.currDate) newDate.setDate(newDate.getDate() + 1) return { ...prev, currDate: newDate.toLocaleDateString(), }; }); };