React TS spread operator

Question

My goal is to spread new item (query) to dataList. It is functional component.

const [dataList, setDataList] = useState([]);

  const transferData = (query: string) => {
    setDataList([...dataList, query]);
  };

Code is written in React Typescript and my editor is shouting:

Argument of type 'string[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
  Type 'string[]' is not assignable to type 'never[]'.
    Type 'string' is not assignable to type 'never'.

Typescript is brand new feature for me, so dont know how to fix it and what does it mean. Thanks.

Answer 1

You have:

const [dataList, setDataList] = useState([]);

That's an empty array, and you haven't used any type parameters, so dataList is typed to be Array<never> (and setDataList can only accept the same sort of parameter: Array<never> ).

Since you're going to be populating the array with strings, you need to tell TS that when you call useState :

const [dataList, setDataList] = useState<Array<string>>([]);