title: useParams for category of products
body: <p>I am new with React JS and I am trying to be able to call the list of products by their category. That should be done from the Navbar, but I could not sort it out. I do not know if I can use more than one parameter inside useParams and also how to use it. If there is someone to help me with it I would much appreciate it. Below is the code.</p>
  <p>This is the ItemDetailContainer from where I call the each ItemDetail:</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  import { useParams } from &quot;react-router-dom&quot;;
  import Aimara from &quot;../../Aimara&quot;;
  import ItemDetail from &quot;../../Components/ItemDetail/ItemDetail&quot;;
  
  const showProduct = (varietalId) =&gt; {
    return new Promise((result) =&gt;
      result(Aimara.find((product) =&gt; product.title === varietalId))
    );
  };
  const ItemDetailContainer = () =&gt; {      
      const [varietals, setVarietals] = useState([]);
      const { varietalId } = useParams([]);
      console.log(varietalId);
      useEffect(() =&gt; {
        showProduct(varietalId).then((product) =&gt; {
          setVarietals(product);
        });
      }, [varietalId]);
    
      return &lt;ItemDetail key={varietals.id} varietals={varietals} /&gt;;           
  };  
  
  export default ItemDetailContainer;
  </code></pre>
  <p>This is the Navbar:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Navbar as NavbarBootstrap, Nav } from &quot;react-bootstrap&quot;;
  import { Link, NavLink } from &quot;react-router-dom&quot;;
  import CartWidgetComponet from &quot;../CartWidget/CartWidget&quot;;
  import LogoComponent from &quot;../Logo/LogoComponent&quot;;
  
  
  const NavBar = () =&gt; (
    &lt;&gt;
      &lt;NavbarBootstrap bg=&quot;light&quot; variant=&quot;light&quot;&gt;        
          &lt;Link to=&quot;/&quot;&gt;
              &lt;NavbarBootstrap.Brand className=&quot;mx-4&quot;&gt;&lt;LogoComponent/&gt; Global Bridge&lt;/NavbarBootstrap.Brand&gt;
          &lt;/Link&gt;
          &lt;Nav className=&quot;ml-auto&quot;&gt;
              &lt;Link to=&quot;/&quot;&gt;
                  &lt;Nav className=&quot;mx-3&quot;&gt;Global Bridge&lt;/Nav&gt;
              &lt;/Link&gt;
              &lt;Link to=&quot;/AimaraRedWines&quot;&gt;
                  &lt;Nav className=&quot;mx-3&quot;&gt;Aimara Red Wines&lt;/Nav&gt;
              &lt;/Link&gt;
              &lt;Link to=&quot;/AimaraWhiteWines&quot;&gt;
                  &lt;Nav className=&quot;mx-3&quot;&gt;Aimara White Wines&lt;/Nav&gt;
              &lt;/Link&gt;
              &lt;Link to=&quot;/Contact&quot;&gt;
                  &lt;Nav className=&quot;mx-3&quot;&gt;Contact&lt;/Nav&gt;
              &lt;/Link&gt;
          &lt;/Nav&gt;
          &lt;NavLink to=&quot;/Cart&quot;&gt;&lt;CartWidgetComponet /&gt;&lt;/NavLink&gt;
      &lt;/NavbarBootstrap&gt;
    &lt;/&gt;
  );
  
  export default NavBar;
  </code></pre>
  <p>This is the ItemDetail, the detail of the item:</p>
  <pre><code>import { Container } from &quot;react-bootstrap&quot;;
  import Item from &quot;../Item/Item&quot;;
  import ItemCountComponent from &quot;../ItemCount&quot;;
  
  const ItemDetail = ({ varietals }) =&gt; {
      return (    
          &lt;&gt;
              &lt;br /&gt;
              &lt;Container className=&quot;py-5 px-5&quot;&gt;
                      &lt;Item varietals={varietals} /&gt;
                      &lt;div className=&quot;ml-4 mr-3&quot;&gt;
                          &lt;div className=&quot;font-italic text-center&quot;&gt;{varietals.description}&lt;/div&gt;
                          &lt;ItemCountComponent className=&quot;d-flex justify-content-center&quot; stock={5} initial={1} /&gt;                                 
                      &lt;/div&gt;
              &lt;/Container&gt;
          &lt;/&gt;
      )
  };
  
  
  export default ItemDetail;
  </code></pre>
  <p>This is the Item</p>
  <pre><code>import { Card, Container } from &quot;react-bootstrap&quot;;
  import &quot;./Style.scss&quot;;
  
  const Item = ({ varietals }) =&gt; {
      return (
      &lt;&gt;
          &lt;Container&gt;
              &lt;Card&gt;
                  &lt;Card.Img variant=&quot;top&quot; src={varietals.pictureUrl} /&gt;
                  &lt;Card.Body&gt;
                      &lt;Card.Title&gt;{varietals.title}&lt;/Card.Title&gt;
                      &lt;Card.Text&gt;
                        ${varietals.price}
                      &lt;/Card.Text&gt;
                  &lt;/Card.Body&gt;
                  &lt;/Card&gt;        
          &lt;/Container&gt;
      &lt;/&gt;
      )
  };
  
  
  export default Item;
  </code></pre>