I have two components, first one is used for getting data from form, second one is used for saving collected data.
There is rideData object in AddRideForm.js where I store data from input. I want to foreward this object to rides-context file and insert it here const [rides, setRides] = useState. Can you please tell me why there is no collected data in useState() mentioned above after I print it in console ?
AddRideForm.js
const AddRideForm2 = () => {
const [userInput, setUserInput] = useState({
name: "",
hour: "",
});
const ctx = useContext(RidesContext);
const nameHandler = (e) => {
setUserInput((prevState) => {
return { ...prevState, name: e.target.value };
});
};
const hourHandler = (e) => {
setUserInput((prevState) => {
return { ...prevState, hour: e.target.value };
});
};
const submitHandler = (e) => {
e.preventDefault();
const rideData = {
name: userInput.name,
hour: userInput.hour,
};
ctx.onAdd(rideData);
console.log(userInput);
console.log(ctx.ridesList);
console.log(ctx.onAdd);
};
return (
<RidesContextProvider>
<form className={classes.addRideFormContainer} onSubmit={submitHandler}>
<Input
className={classes.addRideFormInput}
value={userInput.name}
onChange={nameHandler}
></Input>
<Input
className={classes.addRideFormInput}
value={userInput.hour}
onChange={hourHandler}
></Input>
<button className={classes.addRideFormButton}>Dodaj</button>
</form>
</RidesContextProvider>
);
};
export default AddRideForm2;
rides-context.js
const RidesContext = React.createContext({
ridesList: {},
onAdd: (data) => {},
onDelete: () => {},
});
export const RidesContextProvider = (props) => {
const [rides, setRides] = useState([
{
hour: "12:00",
name: "Jan",
},
{
hour: "12:00",
name: "Bartek ",
},
{
hour: "12:00",
name: "Kamil",
},
]);
const addRideHandler = (data) => {
setRides(data);
};
return (
<RidesContext.Provider
value={{
ridesList: rides,
onAdd: addRideHandler,
}}
>
{props.children}
</RidesContext.Provider>
);
};
export default RidesContext;