title: Get Label or value of DropdownItem to set text value to DropdownToggle
body: <p>Im trying to get the value of DropdownItem  in a DropDownMenu to set the value (or label name) in the DropDownToggle tag, instead of a static text that says: "Dropdown"  I want the active option innerText to be displayed. (what a redundant post....) </p>
  
  <p>But yes... the issue is that I'm not sure how to get the options label or value. I saw that  for react native has a property that do that but Im using React.js. </p>
  
  <p>I tried many solutions and one that "worked" (kind of) was to create an object with the velues but I dont know how to bind them to the options with hooks or similar, like this: </p>
  
  <pre><code>const options = [
    { value: '', label: 'All' },
    { value: 'favorite', label: 'Favorite' },
    { value: 'recent', label: 'Recent' }
  ];
  </code></pre>
  
  <p>and then render it with:</p>
  
  <pre><code>return(
    &lt;Select className="mt-4 col-md-8 col-offset-4"
    options = { options }
  /&gt;
  );
  </code></pre>
  
  <p>But again... Im not getting the idea how to bind them to my actual code... So I came with the questions... how do I get the innerText of the option that I want to be displayed when the option is active? should I save it in a state? or is there an easier way to do it?</p>
  
  <p>This is my code so you can see what I mean...:</p>
  
  <pre><code>import React, {useState} from 'react';
  import {
    Col,
    Container,
    ListGroup,
    ListGroupItem,
    Nav,
    Row,
    UncontrolledDropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem,
  } from 'reactstrap';
   import {Favorite} from './Favorite';
  
  export const ByCourse = ({projects, updateProjects}) =&gt; {
    console.log('window.projects = ', projects);
  
    const [filter, setFilter] = useState(); &lt;-------- Here I declared my filters
  
    const filteredProjects = !filter ? projects : projects.filter(project =&gt; project[filter]);
  
    return (
      &lt;div className="section-component"&gt;
        &lt;h2 className="mt-2 mb-4"&gt;By Course&lt;/h2&gt;
  
    &lt;Nav className="nav-tabs mb-3"&gt;
      &lt;UncontrolledDropdown setActiveFromChild&gt;
        &lt;DropdownToggle tag="button" className="nav-link" caret&gt;
  
          Filter: {filter}   &lt;---------- Here I want to display the label names of the options
  
        &lt;/DropdownToggle&gt;
        &lt;DropdownMenu&gt;
          &lt;DropdownItem tag="button" onClick={() =&gt; setFilter()} active&gt;
  
            All &lt;--------------- this should be displayed when it is active or by default, now it display only the value of my function for filtering.
  
          &lt;/DropdownItem&gt;
          &lt;DropdownItem tag="button" onClick={() =&gt; setFilter('favorite')}&gt;
  
            Favorite &lt;----------------- this should be displayes when active
  
          &lt;/DropdownItem&gt;
          &lt;DropdownItem tag="button" onClick={() =&gt; setFilter('recent')}&gt;
  
            Recent  &lt;----------------- this should be displayes when active
  
          &lt;/DropdownItem&gt;
          &lt;DropdownItem tag="button" onClick={() =&gt; setFilter('userAssigned')}&gt;
  
            User Assigned &lt;----------------- this should be displayes when active
  
          &lt;/DropdownItem&gt;
        &lt;/DropdownMenu&gt;
      &lt;/UncontrolledDropdown&gt;
    &lt;/Nav&gt;
  
    &lt;Container className={'p-0'}&gt;
      {filteredProjects.map(project =&gt; {
        return (
          &lt;Row key={project.projectId} className={'h-100'}&gt;
            &lt;Col md={12} className={'p-0'}&gt;
              &lt;ListGroup&gt; ........
  </code></pre>
  
  <p>I really apreciate any help or guidence with this reactstrap component and my facepalm issue... </p>