title: React state open all submenu instead of only the one clicked, want to use only one state for all my menu items
body: <p>I have a react app where I render this information in a component:</p>
  <pre><code>const navigation = [
    {
      name: &quot;Services&quot;,
      description: &quot;Our services&quot;,
      href: &quot;#&quot;,
      subMenu: [
        { name: &quot;Management&quot; },
        { name: &quot;Development&quot; },
        { name: &quot;Specialists&quot; },
      ],
    },
    {
      name: &quot;Experts&quot;,
      description: &quot;our experts&quot;,
      href: &quot;#&quot;,
      subMenu: [
        { name: &quot;Engineers&quot; },
        { name: &quot;Project managers&quot; },
        { name: &quot;Developers&quot; },
        { name: &quot;Cloud solutions&quot; },
      ],
    }, 
  </code></pre>
  <p>So &quot;description&quot; is the &quot;header&quot; for each submenu and &quot;name&quot; is each item in the submenu.</p>
  <p>Im setting the following state:</p>
  <pre><code> const [ShowSubMenu, setShowSubMenu] = useState(false);
  </code></pre>
  <p>This is where I render the submenu in my component:</p>
  <pre><code>{navigation.map((item) =&gt; (
              &lt;&gt;
                &lt;div
                  onClick={() =&gt; setShowSubMenu(!ShowSubMenu)}
                  className=&quot; border-b-2 justify-between pb-4 pl-2 font-bold flex &quot;
                &gt;
                  &lt;h3 className=&quot; text-roboto&quot;&gt;{item.description}&lt;/h3&gt;
                  &lt;div className=&quot;border-solid border-b-2&quot;&gt;&lt;/div&gt;
                  &lt;ChevronDownIcon
                    className={ShowSubMenu ? &quot;rotate-90 h-5 w-5&quot; : &quot;h-5 w-5 &quot;}
                  /&gt;
                &lt;/div&gt;
  
                &lt;div className=&quot; flex flex-col&quot;&gt;
                  {item.subMenu.map((sm) =&gt; (
                    &lt;div
                      key={sm.name}
                      className={!ShowSubMenu ? &quot;hidden&quot; : &quot; pl-2 pt-2&quot;}
                    &gt;
                      {sm.name}
                    &lt;/div&gt;
                  ))}
                &lt;/div&gt;
              &lt;/&gt;
            ))}
  </code></pre>
  <p>I get that since my submenu opens depending on state, it will open all the submenus. How do I fix so that it knows which item is clicked and as such only opens the children for that item? I thought that the &quot;key&quot; prop would let it figure this out. I don't want to have an individual useState for each item unless nesseccary. Thanks for help!</p>
  <p>TLDR: Click changes state which opens all submenus. Want to open only the submenu for item clicked while only using one useState statement.</p>