title: Reactjs Jsx Conditional and useState logic
body: <p>I'm trying to do the following
  I have a dropdown menu where I created state to have only one menu item active at a time and I will also use this to make the active page effect
  And then I need to do this check on my jsx
  I move to my menu in all my states
  I need to check the following:</p>
  
  <pre><code>const { name, link, dropdownItems } = tag;
  </code></pre>
  
  <p>if my name exists in my <code>visibleMenu</code> array
  and if it is true and I also need to check if my <code>dropdownItems</code> is true for there yes render my dropdown menu, basically i'm a little confused on how to do these checks in jsx</p>
  
  <p>code:</p>
  
  <pre><code>const MenuBar = props =&gt; {
    const MenuTags = [
      {
        name: 'home',
        link: '/',
        dropdownItems: {
          names: ['one', 'two', 'three'],
          link: ['/aa', '/b'],
        },
      },
      {
        name: 'about',
        link: '../abovisibleMenuut',
        dropdownItems: {
          names: ['one', 'two', 'three'],
          link: ['/aa', '/b'],
        },
      },
      { name: 'not dropdown', link: '../dashboard' },
      { name: 'not dropdown', link: '../dashboard/about' },
    ];
    const [visibleMenu, setVisibleMenu] = useState(
        MenuTags.reduce((r, e) =&gt; ((r[e.name] = false), r), {}),
      ),
      onUpdateVisibility = item =&gt; {
        const visibleMenuCopy = { ...visibleMenu };
        Object.keys(visibleMenuCopy).forEach(
          key =&gt; (visibleMenuCopy[key] = key === item),
        );
        setVisibleMenu(visibleMenuCopy);
      };
    console.log(visibleMenu);
    return (
        &lt;&gt;
        {MenuTags.map(item =&gt; (
          &lt;MenuItem
            tag={item}
            visibleMenu={visibleMenu}
            onClick={() =&gt; onUpdateVisibility(item)}
          /&gt;
        ))}
        &lt;/&gt;
    );
  };
  </code></pre>
  
  <p><strong>and this is my menu items: ( here i need jsx conditions )</strong></p>
  
  <pre><code>const MenuItem = ({ tag, visibleMenu }) =&gt; {
    const { name, link, dropdownItems } = tag;
    console.log(visibleMenu);
    return (
      &lt;NavLi&gt;
        &lt;Link to={link}&gt;{name}&lt;/Link&gt;
      &lt;/NavLi&gt;
    );
  };
  </code></pre>
  
  <p>I don't know if this is the correct logic, but it was the only way I managed to get only one state of my array to be true at a time
  to render my dropdown menu or apply a css to my active item</p>