Cannot find name 'setTask' typescript from js code React

Akshay Bankapure 0
Viewed 20

I am trying to test a form in a basic react web app but I am getting the errors

  1. Cannot find name 'setTask' on the line 5.
  2. On Line 7, Parameter 'e' implicitly has an 'any' type.ts(7006)

please help m ewith this, here is the code below:

import React, {useState} from 'react';
//importing libararies
import { PlusIcon } from '@heroicons/react/24/solid'
const CusotmForm = () => {
    cosnt [task, setTask] = useState({});
//prevents default when you submit and refresh
  const handleFormSubmit = (e) =>{
    e.preventDefault();
    console.log(e);
  }
  return (
    <form 
    className="todo"
    onSubmit={handleFormSubmit}
    >
      
     <div className="wrapper">
       <input 
       type="text" 
       id="task"
       className="input"
       value={task}
       onInput={(e)} =>setTask(e.target.value)
       required
       autoFocus
       maxLength={60}
       placeholder="Enter Task"
       />
       <label htmlFor="task"
       className="label"
       >Enter Task</label>
        </div>   
        <button
        className="btn"
        aria-label="Add task"
        type = "submit"
        >
        <PlusIcon />
        </button>
    </form>
  )
}//need to install npm install @heroicons/react

export default CusotmForm
vite reactjs typescript
1 Answers
  1. Const is Misspelled
  2. You have to assign type to the params of the handleFormSubmitFunction.
  const [task, setTask] = useState({});

  // you didn't assign any type to e, so it implicitly has any. So assign
  const handleFormSubmit = (e:React.ChangeEvent<HTMLInputElement>) =>{
    e.preventDefault();
    console.log(e);
  }
sms0
Related