title: All dropdown rows open on click
body: <p>I am working on a component for a gatsby project.
  I want to build a dropdown menu component that shows data about teachers that teach the subject selected.
  this is how it looks like right now:</p>
  <p><a href="https://i.stack.imgur.com/YqCps.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YqCps.png" alt="enter image description here" /></a></p>
  <p>Actually everything works, except that all dropdown rows will open when one is clicked. I just want the one to open that is selected.</p>
  <p>Take a look at my code below:</p>
  <pre><code>import * as React from 'react'
  import { useState, useEffect } from &quot;react&quot;
  import { StaticQuery, graphql } from 'gatsby'
  import { BiChevronDown } from &quot;react-icons/bi&quot;;
  import { GatsbyImage, getImage } from &quot;gatsby-plugin-image&quot;
  import { MDXProvider } from &quot;@mdx-js/react&quot;
  
  
  const rows = [
      {
      id: &quot;verantwortliche&quot;,
      title: &quot;Verantwortliche&quot;,
      },
      {
      id: &quot;streichinstrumente&quot;,
      title: &quot;Lehrende der Streichinstrumente&quot;,
  
      },
      {
      id: &quot;zupfinstrumente&quot;,  
      title: &quot;Lehrende der Zupfinstrumente&quot;,
  
      },
      {
      id: &quot;tasteninstruments&quot;,    
      title: &quot;Lehrende des Tasteninstruments&quot;,
      },
      {
      id: &quot;gesangs&quot;,  
      title: &quot;Lehrende des Gesangs&quot;,
      },
      {
      id: &quot;schlagzeugs&quot;,  
      title: &quot;Lehrende des Schlagzeugs&quot;,
      },
      {
      id: &quot;akkordeons&quot;,   
      title: &quot;Lehrende des Akkordeons&quot;,
      },
      {
      id: &quot;musiktheorie&quot;, 
      title: &quot;Lehrende der Musiktheorie&quot;,
      },
      {
      id: &quot;frueherziehung&quot;,   
      title: &quot;Lehrende der Früherziehung&quot;,
      }
  ]
  
  
  
  function Departments(props) {
      return(
      &lt;article&gt;
          &lt;div className=&quot;staff-image-container&quot;&gt;
          &lt;GatsbyImage alt='some alt text' image={props.image} style={{margin: &quot;0 auto&quot;, padding: &quot;0&quot;}} /&gt;
          &lt;/div&gt;
          &lt;div style={{margin: &quot;0 2em&quot;}}&gt;
          &lt;div&gt;
              &lt;h4 style={{margin: &quot;0&quot;}}&gt;{props.name}&lt;/h4&gt;
              &lt;h5&gt;{props.description}&lt;/h5&gt;
          &lt;/div&gt;
          &lt;p&gt;&lt;MDXProvider&gt;{props.bio}&lt;/MDXProvider&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/article&gt; 
      )
  }
  
  
  
  class DropDownRows extends React.Component {
      constructor(props) {
      super(props);
      this.state = {isToggleOn: false};
      // This binding is necessary to make `this` work in the callback
      this.handleClick = this.handleClick.bind(this);
      this.handleSelect = this.handleSelect.bind(this);
      }
      handleClick(event) {
      const id = event.target.id;
      console.log(id);
      this.setState(prevState =&gt; ({
          isToggleOn: !prevState.isToggleOn,
          selectedCategory: id
      }));
      }
      handleSelect(event) {
      const id = event.target.id;
      console.log(id);
      this.setState(prevState =&gt; ({
          selectedCategory: id
      }));
      }
  
      
      render() {
      return (
          &lt;StaticQuery
          query={graphql`
          query departmentsQuery {
          allMdx {
              edges {
              node {
                  excerpt(pruneLength: 900)
                  id
                  body
                              fileAbsolutePath
                  frontmatter {
                                  id
                  title
                  description
                  featuredImage {
                      childImageSharp {
                      gatsbyImageData(
                          placeholder: BLURRED
                      )
                      }
                  }
                  }
              }
              }
          }
          }       
          `}
  
          render={data =&gt; (
              &lt;div className=&quot;dropdown-rows&quot;&gt;
              {rows.map(row =&gt; (
                  &lt;div key={row.id}&gt;
                  &lt;div className=&quot;row&quot;&gt;
                      &lt;div className=&quot;col&quot;&gt;{row.title}&lt;/div&gt;
                      &lt;div className=&quot;col&quot;&gt;
                      &lt;BiChevronDown
                          onClick={this.handleClick}
                          style={{float: &quot;right&quot;}}
                          onSelect={this.handleSelect}
                          id={row.id}
                      /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;staff-container&quot;&gt;               
                      {data.allMdx.edges.map(edge =&gt; (
                      this.state.isToggleOn &amp;&amp; this.state.selectedCategory &amp;&amp; row.id  == edge.node.frontmatter.id
                          ? &lt;Departments id={edge.node.id} name={edge.node.frontmatter.title} description={edge.node.frontmatter.description} key={edge.node.id} image={getImage(edge.node.frontmatter.featuredImage)}  bio={edge.node.excerpt} /&gt;
                      : ''
                      ))}
                  &lt;/div&gt;
                  &lt;/div&gt;
              ))}
              &lt;/div&gt;
          )}
          /&gt;
      )
      }
  }
  
  export default DropDownRows
  </code></pre>