How to set an array of Objects in useState using TypeScript

Question

 const res = {
      results: {
        documents: [
          {
            suggestion: 'tes1',
          },
          {
            suggestion: 'test2',
          },
          {
            suggestion: 'test3',
          },
          {
            suggestion: 'test4',
          },
        ],
      },
      meta: {
        request_id: '0e6aa4da',
      },
    };

I would like to set that "res" data into useState().

So I created inferface:

interface IResult {
  documents: [
    {
      suggestion: string;
    }
  ];
}

This is how look like my useState:

  const [querySuggestionResult, setQuerySuggestionResult] = useState<IResult[]>(
    []
  );

I want to set this json file (response form API) into the useState, so i tried

setQuerySuggestionResult([{documents: res.results.documents}]);

I tried like that as well

setGuerySuggestionResult(res.results.documents);

an error what ive got

Can someone explain to me how to set an array of Objects to useState please !!

Cistaceous

It should just be setQuerySuggestionResult(res.results.documents); – Tilla

just fix mistake sorry for that – Cistaceous

I tried setGuerySuggestionResult(res.results.documents); but not working – Cistaceous

Answer 1

I find the easiest way to be using an Array generic type (Array<T>):

interface Foo {
    id: string;
}

const [list, setList] = useState<Array<Foo>>([]);

You can also specify an array literal (T[]):

const [listAlt, setListAlt] = useState<Foo[]>([]);

// edit: another way using `readonly`
const [readonlyList, setReadonlyList] = useState<readonly Foo[]>([]);
const [otherReadonlyList, setOtherReadonlyList] = useState<ReadonlyArray<foo>>([]);

Note that to use readonly, using Array<...> will not work (i.e., readonly Array<Foo> will not work). You must use the readonly Foo[] notation or use ReadonlyArray<Foo>.

Mide

Answer 2

Is it possible the interface definition is incorrect? Should it not be something like this?:

interface IResult {
  documents: {
      suggestion: string;
    }[];
}

Jael

Answer 3

I did like that:

First updated interface:

type SuggestionType = { suggestion: string };
export interface IResult {
  documents: SuggestionType[];
}

Second updated useState:

const [querySuggestionResult, setQuerySuggestionResult] = useState<IResult>();

And at last I am able to setState like this:

setQuerySuggestionResult(res.result); 

Thank You! Like it shere it !

Cistaceous