Error message": "Type '{ task: string; desc: string; }' is not assignable to type 'never'

[rashmidhande1]

Am getting this error
Error message": "Type ‘{ task: string; desc: string; }’ is not assignable to type ‘never’.
If any one is there to help please help me with this.

"use client";
import React from "react";
import { useState } from "react";
import { render } from "react-dom";

const page = () => {
  const [task, setTask] = useState("");
  const [desc, setDesc] = useState("");
  const [mainTask, setMainTask] = useState([] as any);
  let renderTask = "no available task";

  const submitHandler = (e: React.FormEvent) => {
    e.preventDefault();

    // Store data from input fields (task and description) in an object and add it to the mainTask array
    setMainTask([...mainTask, { task, desc }]);
    console.log(mainTask);
    setTask("");
    setDesc("");
  };

  return (
    <div>
      <h1 className="bg-green-200	 py-10 font-bold text-9xl text-white text-center">
        Rashmi's to do list
      </h1>
      <div className=" bg-slate-950	 h-screen	">
        <form className="flex py-40 justify-between" onSubmit={submitHandler}>
          <input
            className="py-2 w-96 m-4 rounded-md h-16"
            type="text"
            placeholder="write your task"
            onChange={(e) => {
              setTask(e.target.value);
            }}
            value={task}
          />
          <input
            type="text"
            className="w-5/12 rounded-md m-4 py-2 h-16"
            placeholder="write your description"
            value={desc}
            onChange={(e) => {
              setDesc(e.target.value);
            }}
          />

          <button className="rounded bg-green-100 h-16 m-4 w-40">
            Add Task
          </button>
        </form>
        <hr />
        <div className="bg-green-100 h-60 ">
          <ul>{renderTask}</ul>
        </div>
      </div>
    </div>
  );
};

export default page;

[haroon]

The mainTask state will only expect an empty array as you initialized it with an empty array

You can use type vars (or whatever they’re called) to change the type, e.g.:

const [mainTask, setMainTask] = useState<{ task: string; desc: string; }[]>([])

[rashmidhande1]

thank you for your reply…Can you please elaborate it more? I am little confuse here.

[haroon]

Basically React will try guess the type you’re using based on the initial value ([] as any)

However, [] has no elements, and so the type it’ll guess is never[].

The explicit type var setting however tells React “No, this is the right type, don’t guess it”

[rashmidhande1]

@haroon Thank you so much for quick and prompt response. I understood now.

Just one more question

const [mainTask, setMainTask] = useState([] as any);

this will work ?
by using this the error has gone actually

[haroon]

No problem! If you feel like my answer has solved your question, feel free to mark it as the solution by pressing the button!

That’s the exact same code you put in your original code - seeing as it warned you before I don’t think it’ll like the same exact thing.

[rashmidhande1]

  const [mainTask, setMainTask] = useState([] );

This was the code I had written

  const [mainTask, setMainTask] = useState([] as any);

this is the code I solved with chat gpt
b8ut I was unable to undesratnd that
So, I wanted to put the code with … const [mainTask, setMainTask] = useState([] );
mistakenly kept with… const [mainTask, setMainTask] = useState([] as any);
just wanted to know more about this.

[Sky]

In React with TypeScript, when you want to define the type of the state you’re setting with useState, you typically do it in angled brackets right before the parentheses. The correct syntax to define the state without an initial value and allowing it to be of any type would be:

const [mainTask, setMainTask] = useState<any>();

In the above line, <any> is a TypeScript type annotation that tells TypeScript to allow the mainTask state variable to be of any type. However, if you are not using TypeScript and just writing in plain JavaScript, you don’t need to and can’t use the as any type assertion. The line should simply be:

const [mainTask, setMainTask] = useState();

Here, useState() is called without any arguments, which means mainTask will be undefined until you call setMainTask with a new value. The as any part is TypeScript syntax for type assertion, used to tell the compiler to treat the value as any type and to not perform any type checking on it. This is usually not recommended because you lose the benefits of TypeScript’s type safety. If you’re working in a TypeScript environment and want mainTask to be able to hold any type of value, you should specify any as the generic parameter for useState as shown in the first example. If mainTask will hold a specific type of value, such as a string, number, or a custom object, you should specify that type instead of any to get the full benefits of TypeScript’s type checking. For example:

const [mainTask, setMainTask] = useState<string>(/* initial string value here */);

Or for an object:

interface Task {
  id: number;
  name: string;
  completed: boolean;
}

const [mainTask, setMainTask] = useState<Task | null>(null);

This sets the initial state to null but indicates that mainTask will eventually hold a Task object. (I think this is what you wanted, correct?)

[rashmidhande1]

thank you so much @Sky … great explanation!

so, const [mainTask, setMainTask] = useState( as any);
this is not a good practice to write So, I will try to solved with the suggestion you provided.
Thank you so much once again!