Question 108642 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to type a function in the React/Typescript

I’m trying to type a function in the child component that returns an object, but I’m getting the error Expected 0 arguments, but got 1 in the handler function. Even though I’m typing the function received from props at the top of the code, expecting it to return an object required.

https://codesandbox.io/s/test-login-page-tasks-typescript-24-04-eg91s5?file=/src/components/TaskComponent.tsx

import React, { useState, FC } from "react";


type Tasks = {
  title: string;
  author: string;
  description: string;
  status: string;
  priority: string;
};

type Props = {
  Tasks: Tasks[];
  changeTask: () => {};
};

const TaskComponent: FC<Props> = ({ Tasks, changeTask }) => {

  const task = Tasks.find((task) => String(task.id) === id);
  const handleSaveTask = (event) => {
    event.preventDefault();

    changeTask({
      ...task,
      status,
      priority
    });
  };
  return (
  <form onSubmit={handleSaveTask}>
    ...
  </form>
  )
Tags:

2

Answers


  1. 0

    As @Niklas suggested, how about changing the type of changeTask?

    Example:

    type Props = {
  tasks: Task[];
  changeTask: (task: Task) => void;
};

    Also, you are using the name Tasks for type and a variable. I would suggest changing either of them.

    Login or Signup to reply.
  2. 0

    enter image description here

    1. The Props -> ChangeTask has been declared as a function which takes no parameters
      However when called on 2 -> an argument has been passed which does not match the signature
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search