onClick error in Nextjs / React js

Question

On the first tag <Link> is making a mistake in the onClick and I don’t understand why.

Please help me out:

import Link from 'next/link';
import React, { useState } from 'react';

export default function SignIn() {
  const [name, setName] = useState('');
  const [room, setRoom] = useState('');

  return (
    <div className="joinOuterContainer">
      <div className="joinInnerContainer">
        <h1 className="heading">Join</h1>
        <div>
          <input placeholder="Name" className="joinInput" type="text" onChange={(event) => setName(event.target.value)} />
        </div>
        <div>
          <input placeholder="Room" className="joinInput mt-20" type="text" onChange={(event) => setRoom(event.target.value)} />
        </div>
        <Link onClick = { e  =>  ( ! Nome  || ! Sala ) ? e . preventDefault ( ) : null }  to = { `/ chat? name = $ { name } & room = $ { room } ` }>
          <button className={'button mt-20'} type="submit">Sign In</button>
        </Link>
      </div>
    </div>
  );
}

Error:

Type '{ Children: Element; onClick: (e: any) => any; to: string; }' is not Assignable to type 'Intrinsicattributes & Linkprops & { Children?: Reactnode; }'. Property 'onClick' does not exist on type 'Intrinsicattributes & Linkprops & { Children?: Reactnode; }'. ts(2322)

Answer 1

This error is due to the factor that Link does not expect to receive a props calling for onClick. We can see it in itself type used by Link:

export declare type LinkProps = {
    href: Url;
    as?: Url;
    replace?: boolean;
    scroll?: boolean;
    shallow?: boolean;
    passHref?: boolean;
    prefetch?: boolean;
}

_{This type is in the file link.d.ts.
By Vscode, you can access the file using the command Ctrl + Left mouse button.}

He doesn’t expect to get one either props by name to, then it will also show an error by Typescript.

Note that the attribute href is mandatory, as specified in the typing then you would have to work with it somehow.

In that case you would have to work with the onClick inside a child component inside the Link, for example in his button, and that to, I guess we’d have to use the href in his stead.

It would be something like:

<Link href={`/ chat? name = $ { name } & room = $ { room } `}>
  <button
    className={'button mt-20'}
    type="submit"
    onClick={(e: any) => (!name || !room ? e.preventDefault() : null)}
  >
    Sign In
  </button>
</Link>

_{Notice I passed a guy any to the e.}

But that’s just a suggestion, because I don’t know what the intent of your code is.

Answer 2

Looking at your code, it has several unnecessary spaces, I do not know if it is like this or was pasting in the question, but, besides, to pass the event as parameter, you must declare so: (e).

Would look like this:

<Link onClick={(e) =>  (! Nome || !Sala) ? e.preventDefault() : null } ........</Link>

But still you do not need this ternary, because you do not need the "null", just do:
if(! Nome || !Sala) e.preventDefault();