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 !!

Answer 1

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

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

Answer 2

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 !