How to fix the Type ‘{handleIndex: ()=> void}’ is not assignable to type 'IntrinsicAttributes' with TypeScript and React?

Question

I'm new to Typescript so I don't know why this error happens and how to fix it... This is my code.

export default function SignupPage() {
  const [index, setIndex] = useState<number>(0);

  const handleIndex = () => {
    setIndex(index + 1);
  };

  return (
    <div>
      <BasicInfo handleIndex={handleIndex} /> // error
    </div>
  );
}

I want to pass handleIndex function as a prop of BasicInfo component and I get this error:

Type ‘{handleIndex: ()=> void}’ is not assignable to type 'IntrinsicAttributes'.

What can I do about it?

Answer 1

Seeing your BasicInfo component I can see that it is not expecting any prop. You should add handleInfo to props:

function BasicInfo({handleIndex}) {...}