title: resolving error message "react-dom.development.js:4091 Uncaught TypeError: onItemSelect is not a function"
body: <p>I don't know why but I get this error constantly when I change the option in the selector .<strong>&quot;react-dom.development.js:4091 Uncaught TypeError: onItemSelect is not a function&quot;</strong>
  :(</p>
     
  <pre class="lang-js prettyprint-override"><code>    import React from &quot;react&quot;;
      import Product from &quot;./Product&quot;;
      import ListGroup from &quot;./listGroup&quot;;
      
      export default function Main(props) {
        const { products, onAdd, categories } = props;
      
          const handleCategorySelect = () =&gt; {
          console.log(&quot;Click&quot;);
        };
      
        return (
          &lt;main className=&quot;block col-2&quot;&gt;
            &lt;ListGroup items={categories} /&gt;
            &lt;h2&gt;Products&lt;/h2&gt;
            &lt;div&gt;
              {products.map((product) =&gt; (
                &lt;Product
                  key={product.id}
                  product={product}
                  onAdd={onAdd}
                  onItemSelect={handleCategorySelect}
                &gt;&lt;/Product&gt;
              ))}
            &lt;/div&gt;
          &lt;/main&gt;
        );
      }
  </code></pre>
  <p>and my listGroup.jsx is :</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  
  function ListGroup(props) {
    const { items, onItemSelect } = props;
    return (
      &lt;form&gt;
        &lt;select
          value=&quot;&quot;
          id=&quot;category&quot;
          name=&quot;category&quot;
          onChange={() =&gt; onItemSelect()}
        &gt;
          &lt;option hidden value=&quot;&quot;&gt;
            Choose here
          &lt;/option&gt;
          {items.map((item) =&gt; (
            &lt;option key={item._id}&gt;{item.name}&lt;/option&gt;
          ))}
        &lt;/select&gt;
      &lt;/form&gt;
    );
  }
  
  export default ListGroup;
  </code></pre>
  <p>and also how can I pass the item object to onChange ?
  I mean if it was a list group I would go with :</p>
  <pre class="lang-js prettyprint-override"><code>&lt;ul className=&quot;list-group&quot;&gt;
    {items.map(item =&gt; (
      &lt;li
        onClick={() =&gt; onItemSelect(item)}
        key={item[valueProperty]}
        className={
          item === selectedItem ? &quot;list-group-item active&quot; : &quot;list-group-item&quot;
        }
      &gt;
        {item[textProperty]}
      &lt;/li&gt;
    ))}
  &lt;/ul&gt;
  </code></pre>
  <p>but with select and option I don't know How to do it.</p>