React sideNav with multiple dropdown buttons

JavaScript
1

I would like to create a sideNavbar with multiple dropdown buttons so once you click on one it should show the Sub Categorys from the main Category

what would be the best way to achive this in reactjs.

        <div class="sidenav">
  <a href="#about">About</a>
  <div className="categorys">
    <button class="dropdown-btn">Products 
      <i class="fa fa-caret-down"></i>
    </button>
    <div className="extraTitles">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div className="categorys">
  <button class="dropdown-btn">Users 
    <i class="fa fa-caret-down"></i>
  </button>
  <div className="extraTitles">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<div className="categorys">
<button class="dropdown-btn">Analytics 
  <i class="fa fa-caret-down"></i>
</button>
<div className="extraTitles">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
</div>
  <a href="#contact">Search</a>
</div>
2

You would create a <Category> component that:

  • as props takes one object (subcats) with key-value pair of subcategory:link, and one string (catName) that is its own name.
  • has an isCollapsed state that initializes as true.
  • has an onClick handler that toggles isCollapsed between t/f.
  • has a convert function that converts the subcats object to jsx
  • always renders a button with the onClick attached, and depending on isCollapsed will render subcategories underneath.
3

I am using reactjs Hooks, could you write me a a small example

4

My laptop is a bit broken, but here’s something that hopefully is what you want.

5

thank you very much this helped me allot

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.