I have navbar component with sign in link that is linked to login page. I have handleLogin function in navbar component and I want pass it through the link and call it in login component.
How to pass this method? I tried using query and getServerSideProps but that's not working.
here is navbar component:
const Navbar = ({token}:{token:string|null}) => {
var [loggedIn,setLoggedIn]=false;
const handleLogin=()=>{
localStorage.removeItem("token")
setLoggedIn(true)
}
return (
<>
{
loggedIn==true ? (
<Link href={"#"}><a href="" onClick={handleLogOut} className="nav-link">log out <FontAwesomeIcon icon={faUser}/></a></Link>
):(
//this is the link that I want it to pass handleLogin function
<Link href={{pathname:"/login",query:{handleLogin:handleLogin}}}><a href="" className="nav-link">Sign in <FontAwesomeIcon icon={faUser}/></a></Link>
)
}
</>
)
}
and this is the login page:
const Login = ({handleLogin}:{handleLogin:(...args:any[])=>void}) {
const [errors, setErrors] = useState([])
const validate=async()=>{
try{
const validateResult= await schema.validate(user,{abortEarly:false})
setErrors([])
return true
}
catch(er:any){
console.log(er.errors)
//@ts-ignore
setErrors(er.errors)
return false
}
}
const handleSubmit=async(e:React.SyntheticEvent)=>{
e.preventDefault();
const validateResult=await validate()
if(validateResult==true){
console.log(JSON.stringify(user))
try{
const response=await axios.post(`https://reqres.in/api/login`,user)
console.log(response.data)
const token=response.data.token;
localStorage.setItem("token",token)
handleLogin()
}
catch(er){
//@ts-ignore
setErrors(["The username or password is incorrect"])
localStorage.setItem("token","")
}
}
}
const handleChange=(e:React.ChangeEvent<HTMLInputElement>)=>{
setUser({...user,[e.currentTarget.id]:e.currentTarget.value})
}
}
return (
<>
<h5>to see the successfull login use:
email:[email protected],
password:"cityslicka"
</h5>
<div className="wrapper fadeInDown">
<div id="formContent">
{errors.length!=0 && (
<div className="vali">
{errors.map((el:any)=>{
return <>
<div key={el.id} className="error-list">
{el}
</div>
</>
})}
</div>
)}
<div className="fadeIn first">
Login
</div>
<form onSubmit={handleSubmit}>
<div className="form-floating form-outline">
<input type="text" id="email" className="fadeIn second form-control" placeholder='Mobile Phone' onChange={handleChange} />
<label className="form-label" htmlFor="email">Email</label>
</div>
<div className="form-floating form-outline">
<input type="password" id="password" className="fadeIn second form-control" placeholder='Password' onChange={handleChange}/>
<label className="form-label" htmlFor="password">Password</label>
</div>
<input type="submit" className="fadeIn fourth " value="Log In"/>
</form>
<div id="formFooter">
<a className="underlineHover" href="#">Forgot Password?</a>
</div>
</div>
</div>
</>
)
export const getServerSideProps = async(context:any) => {
console.log(context.query)
return {
props: {
handleLogin: context.query.handleLogin //pass it to the page props
}
}
}
export default Login;
When I try my code I see this error:
Type '() => void' is not assignable to type 'string | number | boolean | readonly string[] | readonly number[] | readonly boolean[] | null | undefined'.
Link.