Making an APi call using a library in React JS

Question

I am using AsyncSelect from react select. I want to figure out how to fetch data in my case. My first purspose is to get all titles of todos in the dropdown, but i can't figure out.

import AsyncSelect from "react-select/async";

const WithPromises = () => {
  const filterData = (inputValue) => {
    const serverData = fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((json) => {
        return json;
      });
    console.log(serverData);
    return serverData;
  };

  const promiseOptions = (inputValue) => {
    filterData(inputValue);
  };

  return (
    <AsyncSelect 
    cacheOptions 
    defaultOptions 
    loadOptions={promiseOptions} />
  );
};

export default WithPromises;

My question is, how to pupulate with titles from todos my dropdown when i will open for the first time?
demo: https://codesandbox.io/s/codesandboxer-example-forked-zsj6i?file=/example.js

Put the response into state instead, then render the AsyncSelect only once the state is populated — CertainPerformance, Feb 19 '21 at 14:58
@CertainPerformance, could you show please how? To understand better what do yu mean. Thanks — Asking, Feb 19 '21 at 15:03
useState: https://reactjs.org/docs/hooks-state.html Conditional rendering: https://reactjs.org/docs/conditional-rendering.html — CertainPerformance, Feb 19 '21 at 15:04
@CertainPerformance, could you show in my code sanbox please? — Asking, Feb 19 '21 at 15:05

Making an APi call using a library in React JS

0 Answers0