Add selected options after Component init

[jfranco09]

Hi,

I'm implementing this with server search and with the ability to have multiple options selected. Having this said, I'm requesting the data from server side and loading the widget but because this is asynchronous, the DB will be slower than the component initialization. Is there any way to set the selected options after the widget has been initialized?

Thanks in advance

[sa-si-dev]

@jfranco09 You can use setValue() method

[ter1203]

I am using this library in my React application.
Here is my VirtualSelect component.

import React from "react";

import "virtual-select-plugin/dist/virtual-select.min.css";
import "virtual-select-plugin/dist/virtual-select.min.js";

export default class VirtualSelect extends React.Component {
  componentDidMount() {
    window.VirtualSelect.init({
      ele: this.ele,
      ...this.props,
    });

    if (typeof this.props.onChange === "function") {
      this.ele.addEventListener("change", this.props.onChange);
    }
  }

  componentWillUnmount() {
    this.ele.destroy();
  }

  render() {
    return <div ref={(ele) => (this.ele = ele)} />;
  }
}

And I am using this component like this:

<VirtualSelect
   name="Category"
   options={categoryOptions}
   onChange={(e) => {
     setCategories(e.target.value);
   }}
   multiple="true"
   search="true"
   placeholder="Select..."
   position="bottom"
   noSearchResultsText="No Category found"
 />

In my page, I display this component right after the page is loaded and it gets the categoryOptions(dropdown options) from the backend.
Here is the code where I fetch the custom data from the backend.

const onCategoryFetch = useCallback(() => {
    AuthApis.fetchCategories(authToken).then((res) => {
      if (res.status) {
        const options = [];
        res.data.forEach((element) => {
          options.push({
            label: element.category,
            value: element.category,
          });
        });
        setCategoryOptions(options);
        return options;
      } else {
        toast.error("can't fetch categories. Server error");
      }
    });
  }, [authToken]);

Here, because it's asynchronous I can't display the categoryOptions on my dropdown component.
How should I use in this case?

Thanks

[sa-si-dev]

I am using this library in my React application.
Here is my VirtualSelect component.

import React from "react";

import "virtual-select-plugin/dist/virtual-select.min.css";
import "virtual-select-plugin/dist/virtual-select.min.js";

export default class VirtualSelect extends React.Component {
  componentDidMount() {
    window.VirtualSelect.init({
      ele: this.ele,
      ...this.props,
    });

    if (typeof this.props.onChange === "function") {
      this.ele.addEventListener("change", this.props.onChange);
    }
  }

  componentWillUnmount() {
    this.ele.destroy();
  }

  render() {
    return <div ref={(ele) => (this.ele = ele)} />;
  }
}

And I am using this component like this:

<VirtualSelect
   name="Category"
   options={categoryOptions}
   onChange={(e) => {
     setCategories(e.target.value);
   }}
   multiple="true"
   search="true"
   placeholder="Select..."
   position="bottom"
   noSearchResultsText="No Category found"
 />

In my page, I display this component right after the page is loaded and it gets the categoryOptions(dropdown options) from the backend.
Here is the code where I fetch the custom data from the backend.

const onCategoryFetch = useCallback(() => {
    AuthApis.fetchCategories(authToken).then((res) => {
      if (res.status) {
        const options = [];
        res.data.forEach((element) => {
          options.push({
            label: element.category,
            value: element.category,
          });
        });
        setCategoryOptions(options);
        return options;
      } else {
        toast.error("can't fetch categories. Server error");
      }
    });
  }, [authToken]);

Here, because it's asynchronous I can't display the categoryOptions on my dropdown component.
How should I use in this case?

Thanks

@hello-sergio you can use setOptions method to update options on API call success.