title: How to show only one element in a Gatsby .map function?
body: <p>I am new to Gatsby. I have lost with what to do here... please help me......
  I want to show only one element(h4) when I click a button.
  For example, I have 5 plans and each plan has one button and one h4 tag.
  When I click the third button, only the third h4 tag will shows.
  As expected by my code, when the button is clicked it displays every element's h4 tag of the map. Is there any way I could active/inactive the component for just one element of the map in this case?
  Thank you in advance.</p>
  <pre><code>  import React, { useState } from &quot;react&quot;
  
    const TourPage = ({
        const [isOpen, setOpen] = React.useState(false)
        const toggleOpen = () =&gt; {
          setOpen(!isOpen)
        }
  
    return (
          &lt;article&gt;
             {plans.map((plan, index) =&gt; {
                return (
                  &lt;div key={index}&gt;
                      &lt;button
                        className=&quot;btn&quot;
                        onClick={toggleOpen}
                      &gt; button &lt;/button&gt;
                      &lt;div
                        className={`${isOpen ? &quot;active&quot; : &quot;inactive&quot;}`}
                      &gt;
                        &lt;h4&gt;{plan.iternary}&lt;/h4&gt;
                      &lt;/div&gt;
                   &lt;/div&gt;
                 )
              })}
          &lt;/article&gt;
  </code></pre>