Estoy tratando de completar mi proyecto y ahora necesito mostrar dos contadores, respectivamente, uno para el día de inicio y otro para el día de finalización de una prenotación. Esa es mi situación actual:
import PrenotationContext from '../context/PrenotationContext.jsx'; const Transactions = () => { const {currentAccount, places} = useContext(PrenotationContext); return (... <div> {places.reverse().map((place,i) => ( <PlaceCard key={i} {...place} /> ))} </div> ... } const PlaceCard = ({id, placeAddress,description,price, owner, isActive}) => { //implementation of prenotation const {isLoading,handleDate, rentPlace, setInactive} = useContext(PrenotationContext); const Input = ({placeholder, name, type, value, handleDate}) => ( <input placeholder={placeholder} type={type} step="1" value = {value} onChange={(e) => handleDate(e, name)} /> ); ... return( <div> ... <Input placeholder="Start Day" name="startDay" type="number" handleDate={handleDate}/> <Input placeholder="End Day" name="endDay" type="number" handleDate={handleDate}/> ... </div> ); export default TransactionsY aquí está PrenotationContext.json:
export const PrenotationProvider = ({children}) => { ... const [date, setDate] = useState({startDay: 0, endDay:0}); ... const handleDate = (e,name) => { console.log(e.target.value); console.log(name) setDate((prevState) => ({...prevState, [name]: e.target.value})) } ... return ( <PrenotationContext.Provider value={{..., handleDate, ... isLoading, setInactive, }}> {children} </PrenotationContext.Provider> ); };Los dos registros en "handleDate" son los siguientes:
y sin valor en pantalla
En su lugar, intentar registrar el prevState dentro de handleDate (que causa una excepción) hará que los registros y también en la página web el valor de salida correcto (1,2,3...)