Property 'todos' is Missing in type '{ setTodos: (todos: Itodo[]) => void; key: string; text: string; }' but required in type 'Props'

Question

These are my mistakes:

Property 'todos' is Missing in type '{ setTodos: (todos: Itodo[]) => void; key: string; text: string; }' but required in type 'Props'.

Property 'id' does not exist on type 'Itodo[]'.

Type 'Dispatch<Setstateaction<Never[]>>' is not Assignable to type '(all: Itodo[]) => void'. Types of Parameters 'value' and 'todos' are incompatible.

Type 'ITodo[]' is not assignable to type 'SetStateAction<never[]>'.
  Type 'ITodo[]' is not assignable to type 'never[]'.
    Type

'Itodo' is not Assignable to type 'Never'.

Here’s the code:

import React from 'react';
import {BsCheck, BsTrashFill} from 'react-icons/bs';

interface ITodo {
  id: string,
  text: string,
  completed: boolean
}

type Props = {
  text: string,
  todos: ITodo[],
  setTodos: (todos: ITodo[]) => void
}

const Todo: React.FC<Props> = ({text, todos, setTodos}) => {
  const deleteHandler = () => {
    setTodos(todos.filter(el => el.id !== todos.id))
  }

  return(
    <div className="todo">
      <li className="todo-item">{text}</li>
      <BsCheck className="check" size={35}/>
      <BsTrashFill onClick={deleteHandler} className="trash" size={35}/>
    </div>
  );
}

export default Todo;

import React from 'react';
import Todo from './Todo';
interface ITodo {
  id: string,
  text: string,
  completed: boolean
}

type Props = {
  todos: ITodo[],
  setTodos: (todos: ITodo[]) => void
}

const TodoList: React.FC<Props> = ({todos, setTodos}) => {

  return(
    <div className="todo-container">
      <ul className="todo-list">
        {todos.map(todo => (
          <Todo setTodos={setTodos} key={todo.id} text={todo.text}/>
        ))}
      </ul>
    </div>
  );
};

import React, { useState } from 'react';
import './App.css';
import Form from './components/Form';
import TodoList from './components/TodoList';

function App(){
  const [todos, setTodos] = useState([]);
  const [inputText, setInputText] = useState("");

  return (
    <main>
      <div className="title">
        <h1><span suppressContentEditableWarning={true} contentEditable="true">Your name</span> todo list</h1>
      </div>
      <Form setInputText={setInputText} todos={todos} setTodos={setTodos} inputText={inputText}/>
      <TodoList setTodos={setTodos} todos={todos}/>
    </main>
  );
}

export default App;

import React from 'react';
import { BsPlusSquareFill } from 'react-icons/bs';
import { v4 as uuidv4 } from 'uuid';

type Props = {
  setInputText: (value: string) => void,
  inputText: string,
  todos: string[],
  setTodos: (value: string[] | any) => any
}

const Form: React.FC<Props> = ({ setInputText, todos, setTodos, inputText }) => {
  const getInputText = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputText(e.target.value);
  }
  const submitTodoHandler = (e: any) => {
    e.preventDefault();
    setTodos([
      ...todos, {text: inputText, completed: false, id:uuidv4()}
    ]);
    setInputText("");
  }
  return(
    <form>
      <div className="row">
        <div className="inputTodo">
          <input value={inputText} type="text" placeholder="Write here your todo" onChange={getInputText}/>
          < BsPlusSquareFill className="plus-sign" onClick={submitTodoHandler} size={40}/>
        </div>
        <select name="todos" id="todos">
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="Uncompleted">Uncompleted</option>
        </select>
      </div>
    </form>
  )
}

export default Form;

How can I fix these mistakes?

Answer 1

Your code was a little difficult to test, but I think I found a possible solution.

First, as I mentioned earlier in this answer, the type for a function setState is a React.Dispatch<SetStateAction<S>>, where S is the type received per parameter in the function setState, something like:

(value: S | ((prevState: S) => S)) => void

In that case, for all setTodos of their Props, we should put:

type Props = {
  ...
  setTodos: React.Dispatch<SetStateAction<ITodo[]>>;
}

Don’t forget to import the SetStateAction:

import React, { useState, SetStateAction } from 'react';

Another detail, in its component TodoList, you forgot to pass the todos:

<Todo setTodos={setTodos} key={todo.id} text={todo.text}/> <= aqui

For he is needed in Props of the component Todo:

type Props = {
  text: string;
  todos: ITodo[]; // aqui
  setTodos: React.Dispatch<SetStateAction<ITodo[]>>;
};

Then add him:

   ...
      <ul className="todo-list">
        {todos.map((todo) => (
          <Todo
            setTodos={setTodos}
            key={todo.id}
            text={todo.text}
            todos={todos}  <= adicionei aqui
          />
        ))}
      </ul>
   ...

Now, in the comments you mentioned:

So how can I change the type? Why can’t I use Never

If you want to change the type, change the type of the initial state, that is, in the useState:

const [todos, setTodos] = useState<ITodo[]>([]);

This is to solve the problem of the type:

Type 'Dispatch<Setstateaction<Never[]>>' is not Assignable to type '(all: Itodo[]) => void'. Types of Parameters 'value' and 'todos' are incompatible.

'Cause now we got a guy for the early stage.

In the tests I did, these changes solved the problems, remembering that I did not use the component Form because he had no relationship with the problem. Give me the feedback if solve or not your problem.

---

In your file from Form, the typing of Prop is with wrong type to todos and setTodos:

type Props = {
  setInputText: (value: string) => void,
  inputText: string,
  todos: string[],                         // aqui
  setTodos: (value: string[] | any) => any // e aqui 
}

Make adjustments to this file as well by changing the type of todos and setTodos:

type Props = {
  text: string;
  // todos: string[],
  // setTodos: (value: string[] | any) => any
  todos: ITodo[]; 
  setTodos: React.Dispatch<SetStateAction<ITodo[]>>;
};