Typescript in react JS

Question

I am using react-select-async-paginate:

async function loadOptions(search, loadedOptions, { page }) {
  const response = await fetch(`/awesome-api-url/?search=${search}&page=${page}`);
  const responseJSON = await response.json();

  return {
    options: responseJSON.results,
    hasMore: responseJSON.has_more,
    additional: {
      page: page + 1,
    },
  };
}

<AsyncPaginate
  value={value}
  loadOptions={loadOptions}
  onChange={setValue}
  additional={{
    page: 1,
  }}
/>

How to apply the typescript for this code: (search, loadedOptions, { page }) taking into account that these are the types?

demo: https://codesandbox.io/s/react-select-async-paginate-forked-qiizl?file=/src/SelectAsyncPaginate.tsx

Mosh Feu · Accepted Answer · 2021-02-22 14:18:25Z

1

As you can see loadOptions type is LoadOptions<OptionType, Additional>.

That's how you should type your loadOptions function

const loadOptions: LoadOptions<any, {page: number}> = ...

You should replace any with the actual option's type (you can figure it from the API response)

https://codesandbox.io/s/react-select-async-paginate-forked-00k7m?file=/src/SelectAsyncPaginate.tsx

answered Feb 22, 2021 at 14:18

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asking Over a year ago

could you help please stackoverflow.com/questions/66546842/…

Mosh Feu Over a year ago

Looks like you got some comments there. Let me know if you need more help

Collectives™ on Stack Overflow

Typescript in react JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related