title: Auto selecting dependent select field options in React
body: <p>I am using React v18.</p>
  <p>I tried to populate react-select options from api, it didn't work as expected.
  Anyway, its fine with normal select as of now.</p>
  <p>I have a row of select boxes as shown below.
  <a href="https://i.stack.imgur.com/Ntoww.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ntoww.png" alt="Dependent select fields" /></a>
  When I select the ID , it shall auto select the category and product name.</p>
  <p>On the other hand, selecting the category should shortlist the product options(it is working).
  Upon selecting the product name from the list, the ID should be selected automatically.</p>
  <p>My question is, <em><strong>how shall we auto select the option value for a select field</strong></em>?</p>
  <p>Sharing my code so far.</p>
  <pre><code>--------------------------------
           dselect.js 
  --------------------------------
  import Select from &quot;react-select&quot;
  import {Row, Col, Container, Form} from &quot;react-bootstrap&quot;
  import React, { useState } from 'react';
  import { useEffect } from &quot;react&quot;;
  const baseurl = &quot;http://localhost:5000/api&quot;;
  const Dselect=()=&gt;{
           
       const [pdtCode, setPdtCode] = useState([]);
       const [catList, setCatList] = useState([]);
       const [pdtList, setPdtlist] = useState([]);
  
  /* **here all the options are fetched for the ID and category** */
  
       useEffect(()=&gt;{
            const fetchCat = async(e) =&gt; {
                 const res = await fetch(`${baseurl}/cat`);
                 const cList = await res.json();
                 console.log(cList)
                 setCatList(cList)
                 }         
  
            const fetchPdtName = async(e) =&gt; {
                 const res = await fetch(`${baseurl}/pdtlist`);
                 const pList = await res.json();
                 console.log(pList)
                 setPdtlist(pList)
                 }
  
                 fetchCat();
                 fetchPdtName();
       },[])
  
  /* Here, fetch the product name and category upon selecting a pdt code */
       const getPdtDetails = async(e) =&gt; {
            const pdtID = e.target.value;
            console.log(pdtID)
            const res = await fetch(`${baseurl}/details`,{
                 method: &quot;POST&quot;,
                 headers: { &quot;Content-Type&quot;: &quot;application/json&quot; },
                 body: JSON.stringify({data:pdtID}),  
                 });
            const detList = await res.json();
                 // console.log(detList)
  
        /* STORED VALUES . BUT DONT KNOW HOW TO USE THESE VALUES TO AUTO SELECT THE OPTIONS*/
  
            const pdt_name=detList.pdt_name;
            const category=detList.category;
            } 
       
         /* GETTING PRODUCT LIST ON SELECTING THE CATEGORY. THIS PART IS WORKING WELL */
  
            const updateList = async(e) =&gt;{
                 const catVal = e.target.value;
                 const res = await fetch(`${baseurl}/pdtList`,{
                           method: &quot;POST&quot;,
                           headers: { &quot;Content-Type&quot;: &quot;application/json&quot; },
                           body: JSON.stringify({data:catVal}),  
                           });
                 const pdtList = await res.json();
                 console.log(pdtList)
                 setPdtlist(pdtList)
            }
  
          /* FETCH PRODUCT CODE BASED ON THE CATEGORY AND PRODUCT NAME SELECTED */
           
          const getPdtcode = async(e) =&gt;{
  
         /* ? * QUESTION : HOW CAN I GET THE CATEGORY VALUE HERE? IT IS NECESSARY TO 
                       FETCH THE APT PRODUCT ID FROM THE DB */
  
                 const pdtVal = e.target.value;
                 const res = await fetch(`${baseurl}/pdtCode`,{
                           method: &quot;POST&quot;,
                           headers: { &quot;Content-Type&quot;: &quot;application/json&quot; },
                           body: JSON.stringify({data:pdtVal}),  
                           });
                 const code = await res.json();
                 console.log(code)
                 setPdtCode(code);
            }
  
  return(
       &lt;div&gt;
            &lt;Container className=&quot;m-5&quot;&gt;
                 &lt;Row&gt;
                      &lt;Col lg={4} md={4} xs={6}&gt;
                           &lt;label&gt;ID&lt;/label&gt;
  
  
  {/* &lt;Select options={pdtList} placeholder=&quot;Select product&quot; /&gt; */} /* Failed with react-select*/
  
                           &lt;select name=&quot;product_id&quot; onChange={(e)=&gt;getPdtDetails(e)} &gt;
                           &lt;option value=&quot;&quot;&gt;-&lt;/option&gt;
                                {pdtList.map((item) =&gt;(
                                     &lt;option key={item.pdt_id} value={item.pdt_id}&gt; {item.pdt_id} &lt;/option&gt;
                                ))}
                           &lt;/select&gt;
                      &lt;/Col&gt;
  
                      &lt;Col lg={4} md={4} xs={6}&gt; &lt;label&gt;Category&lt;/label&gt;                             
                           &lt;select name=&quot;category&quot; onChange={updateList}  &gt;
                                &lt;option value=&quot;&quot;&gt;-&lt;/option&gt;
                                {catList.map((item) =&gt;(
                                     &lt;option key={item.cat_id} value={item.category}&gt;{item.category}&lt;/option&gt;
                                ))}
                           &lt;/select&gt;                              
                      &lt;/Col&gt;
                      &lt;Col lg={4} md={4} xs={6}&gt; &lt;label&gt;Product &lt;/label&gt;
                          &lt;select name=&quot;product&quot; onChange={getPdtcode} &gt;
                           &lt;option value=&quot;&quot;&gt;-&lt;/option&gt;
                                {pdtList.map((item) =&gt;(
                                     &lt;option key={item.pdt_id} value={item.pdt_id}&gt; {item.pdt_name} &lt;/option&gt;
                                ))}
                           &lt;/select&gt;                     
                      &lt;/Col&gt;
                 &lt;/Row&gt;
            &lt;/Container&gt;
       &lt;/div&gt;
  )    
  }
    
  export default Dselect
  </code></pre>
  <p>Any piece of advise or help is appreciated.
  Thanks in advance.</p>
  <p>Let me share the list data as well.</p>
  <p>Category list</p>
  <p><a href="https://i.stack.imgur.com/8LjNJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8LjNJ.png" alt="Category list" /></a></p>
  <p>Products list</p>
  <p><a href="https://i.stack.imgur.com/oI6er.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oI6er.png" alt="Products list" /></a></p>