#StackBounty: #reactjs #react-select How to load React-select Async with initial options for edit item function when using a search API?

Bounty: 100

I’m using React-Select’s Async Select to implement a dropdown where the user will be able to search through a large amount of data. They will see the employee’s name when they’re searching and they can select multiple employees.

React-select will get the data by using a search API that I have and will insert the query behind by using this method:

const loadOptions = async () => {
        const res = await fetch(`https://example.com/search_user?value=${query}`);
        const data = await res.json();
        const results = data.Result;

        if (results === 'No result found.') {
            return [];
        }

        return results;
    };

What I want to get is the employee ID and their full name, then post both of these info to an API after the user submitted the form.

All these work perfectly but now I want to implement an edit function where the user can edit the Group Members that have been saved into the DB and created.

So naturally I will need to load the react-select‘s Async dropdown with the initial options, but I have no idea how to load the initial options when I’m using a search API that only will get a certain list of results after I typed something.

I want something like this when the user clicks on edit, which will show the saved employee’s name (could be single or multi options selected) from the DB:
enter image description here

Here is the codesandbox for reference but I’m only using a fake API link:

Edit strange-resonance-l631s

Edit:

For @Pitter’s reference:
enter image description here


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.