title: React - how to filter accordion header
body: <h4>Hi!</h4>
  <p>I am new to React & building a company directory.</p> 
  <p>The search bar at the top needs to filter the accordion header & results.</p>
  <p>Search results filter results but accordion headers should filter too - if the employee is not in the department then the department heading shouldn't show when search data is entered. </p>
  <p>Thanks in advance! </p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  import { Accordion, Card } from &quot;react-bootstrap&quot;;
  import axios from &quot;axios&quot;;
  
  const App = () =&gt; {
    const [teamMemberData, setTeamMemberData] = useState([]);
  
    const [searchTerm, setSearchTerm] = useState('');
  
    const tmData = async () =&gt; {
      const response = await axios.get(
        &quot;http://localhost:5000/teamMembers&quot;
      );
      setTeamMemberData(response.data);
    };
  
      const uniqueTags = [];
      teamMemberData.map(person =&gt; {
          if (uniqueTags.indexOf(person.dept) === -1) {
              uniqueTags.push(person.dept)
          }
      });
  
      const renderAccordion = (data, index) =&gt; {
  
          return (
                  &lt;Accordion key={index} &gt;
                  &lt;Card&gt;
                      &lt;Accordion.Toggle as={Card.Header} eventKey={index} &gt;
                        Dept: {data}, Index {index}  &lt;i&gt;+&lt;/i&gt;
                      &lt;/Accordion.Toggle&gt;
                      &lt;Accordion.Collapse eventKey={index}&gt;
                          &lt;Card.Body&gt;
                              {teamMemberData.filter(tm =&gt; tm.dept == data)
                                  .filter((val) =&gt; {
                                      if (searchTerm == &quot;&quot;) { return data }
                                      else if (val.name.toLowerCase().includes(searchTerm.toLowerCase()))
                                      {
                                          return data
                                      }
                                   }).map(renderList, index)}
                          &lt;/Card.Body&gt;
                      &lt;/Accordion.Collapse&gt;
                  &lt;/Card&gt;
                  &lt;/Accordion&gt;
      );
    };
  
      const renderList = (data, index) =&gt; {
          return (
              &lt;ul&gt;
                  &lt;li&gt;Name: {data.name}, Title: {data.title}, Dept: {data.dept}, Desk: {data.extension}, Mobile: {data.mobile} &lt;/li&gt;
              &lt;/ul&gt;
          );
      };
  
      useEffect(() =&gt; {
          console.log('useeffect is running...')
          tmData();
      }, []);
  
      return &lt;div className=&quot;App&quot;&gt;
          &lt;div className='formatInput' &gt;
              &lt;input type=&quot;text&quot; placeholder=&quot;Search...&quot; onChange={event =&gt; {setSearchTerm(event.target.value)}}/&gt;
          &lt;/div&gt;
          {uniqueTags.map(renderAccordion)}
      &lt;/div&gt;;
  
  }; 
  
  export default App;
  </code></pre>