I'm trying to complete my project and now I need to show two counter respectively one for the start day and one for the end day of a prenotation. That's my current situation:
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 Transactions
And here is 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>
);
};
The two logs in "handleDate" are the following:
and no value on screen
Instead trying to log the prevState inside handleDate (causing exception) will cause the logs and also on the webpage the correct output value (1,2,3...)