How to select an option from list after page load in React Js & Material UI?

user_18538002 0
Viewed 378

By using React Js & Material UI (Using functional Component) I need to select an option from a select list, once page is loaded completely, As i need to get the option from URL so once get the option from URL , and after data is being loaded into the select list i want to select the list as per my option i got from URL

here is my select list

SetOption('My Option which i get from URL');

<Select id="productName" name="productName" options={jsonProducts} onChange={onSelectChange} placeholder={"All Products (" + supplierProducts.length + ")"} ref={productInputRef} />

here all the Elements in this select list are coming from an API which i am keeping in jsonProducts

so how can i make this select list to select a particular element

material-ui reactjs
2 Answers
user_72537750

You can add a value like this

value={jsonProduct.filter(option => option.value === YourStateVar)}

Your Select list now look like this

           <Select  id="productName"   value={jsonProduct.filter(option => option.value === YourStateVar)}   
 name="productName" options={jsonProducts} onChange=
    {onSelectChange}    placeholder={"All Products (" + supplierProducts.length + ")"}  
        ref={productInputRef} />
user_70253620
Related