So I have my context set like this:
import { createContext, ReactNode, useState } from "react";
type props = {
children: ReactNode;
};
type GlobalContextType = {
name: string;
setName: (value: string) => void;
};
export const GlobalContext = createContext<GlobalContextType>(
{} as GlobalContextType
);
export const GlobalProvider = ({ children }: props) => {
const [name, setName] = useState<string>("");
return (
<GlobalContext.Provider value={{ name, setName }}>
{children}
</GlobalContext.Provider>
);
};
And I also have a input
const { name, setName } = useContext(GlobalContext);
const handleChange = (e: React.FormEvent<HTMLInputElement>): void => {
setName(e.currentTarget.value);
};
<input
placeholder="Insert a username"
onChange={handleChange}
data-testid="Login-input"
/>
If I log the "name" value that is changed through the setName it seems to work just fine But I also have a login button that redirects to another route /home.
export const Home = () => {
const { name } = useContext(GlobalContext);
return (
<div>
<p>{name} </p>
</div>
);
};
Here, the name displays as the default value that was set up in the context, not the updated one that I changed in the input. I tried to rewrite it but it doesn't seem to be wrong. Am I missing something?
