title: React/NextJS Handle Option Selected Property
body: <p>I am working on a website and had a fairly dynamic select box I have been working with. I am fairly new to React in general, and while the select box is working in terms of the functionality of my app...I cannot seem to be able to find a good way to add the selected property to an option once it has been selected. I am wondering if there is a better way to do this? Here is what I am working with (I didn't create the component for &quot;activeProp&quot; yet):</p>
  <pre><code>import styles from '../../styles/Components/SubFilterSelect.module.scss';
  
  const SubFilterSelect = (props) =&gt; {
  
    const handleChange = (event) =&gt; {
      const value = event.target.value
      props.subFunc(value)
    }
  
    const Application = (props) =&gt; {
      if(props.item &amp;&amp; props.item.data.parent_category === 'Application'){
        return(
          &lt;option value={props.item.id}&gt;{props.item.data.name}&lt;/option&gt;
        )
      } else{
        return null
      }
    }
  
    const Benefit = (props) =&gt; {
      if(props.item &amp;&amp; props.item.data.parent_category === 'Benefit'){
        return(
          &lt;option value={props.item.id}&gt;{props.item.data.name}&lt;/option&gt;
        )
      } else{
        return null
      }
    }
  
    const ReturnCategories = () =&gt; {
      if(props.activeApp){
        return(
          &lt;select onChange={handleChange} defaultValue={'DEFAULT'}&gt;
            &lt;option value='DEFAULT'&gt;Choose a Category&lt;/option&gt;
            {props.categories.map((category,key) =&gt; 
              &lt;Application key={key} item={category} /&gt;
            )}
          &lt;/select&gt;
        )
      } else if(props.activeBenefit){
        return(
          &lt;select onChange={handleChange} defaultValue={'DEFAULT'}&gt;
            &lt;option value='DEFAULT'&gt;Choose a Category&lt;/option&gt;
            {props.categories.map((category,key) =&gt; 
              &lt;Benefit key={key} item={category} /&gt;
            )}
          &lt;/select&gt;
        )
      } else if(props.activeProp){
        return(
          &lt;select onChange={handleChange} defaultValue={'DEFAULT'}&gt;
            &lt;option value='DEFAULT'&gt;Choose a Category&lt;/option&gt;
            {props.categories.map((category,key) =&gt; 
              {category.data.parent_category === 'Property' ? 
                &lt;option key={key} id={category.id}&gt;{category.data.name}&lt;/option&gt;
              : ''}
            )}
          &lt;/select&gt;
        )
      } else{
        return(
          &lt;select defaultValue={'DEFAULT'}&gt;
            &lt;option value='DEFAULT'&gt;Choose a Filter Above&lt;/option&gt;
          &lt;/select&gt;
        )
      }
    }
  
    return(
      &lt;section className={styles.filterSection}&gt;
        &lt;ReturnCategories /&gt;
      &lt;/section&gt;
    )
  }
  
  export default SubFilterSelect
  </code></pre>