Property 'filter' does not exist on type 'Setstateaction<Never[]>'

Question

I’m having trouble getting this little piece of code to work:

Here is my code:

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

type Props = {
  text: string,
  todos: SetStateAction<never[]>,
  setTodos: React.Dispatch<React.SetStateAction<never[]>>
}

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;

The mistakes are:

Property 'filter' does not exist on type 'Setstateaction<Never[]>'.
Property 'filter' does not exist on type '(prevState: Never[]) => Never[]'.

Parameter 'el' implicitly has an 'any' type.

Property 'id' does not exist on type 'Setstateaction<Never[]>'.
Property 'id' does not exist on type 'Never[]'.

Answer 1

You can just write it down using any[]:

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

Or you can write interface ITodo as:

interface ITodo {
  id: number
  name: string
  // ..
}

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

Because, in React, Dispatch is defined as:

type Dispatch<A> = (value: A) => void; // Function

And SetStateAction:

type SetStateAction<S> = S | ((prevState: S) => S); // Function Ou Value

And you need to idToDelete thus:

const deleteHandler = (idToDelete) => {
  setTodos(todos.filter(el => el.id !== idToDelete))
}