title: Why am I making an invalid hook call?
body: <p>Hi I am new to React so please be patient. Could some one tell me why I am making an invalid Hook Call? I think the issue is to do with the useState(null)or the function that it is being used in. The code below shows the whole competent  I am trying to use it in Any help would be greatly appreciated.</p>
  
  <pre><code>import React, { useState } from 'react';
  import ScrollMenu from 'react-horizontal-scrolling-menu';
  import './horizontalscroll.css';
  
  const data = [
    {
      category: "Brands",
      items: ["Gucci", "Calvin klein", "Prada"]
    },
    {
      category: "Films",
      items: ["Inception ", "Dark Night", "Home Alone"]
    }
  ];
  
  
  const [category, setCategory] = useState(null);
  const onClick = category =&gt; {
      setCategory(category);
    };
  
  
  // One item component
  // selected prop will be passed
  const MenuItem = ({ text, selected }) =&gt; {
    return (
      &lt;div
        className="menu-item"
      &gt;
        {text}
      &lt;/div&gt;
    );
  };
  
  // All items component
  // Important! add unique key
  export const Menu = (list) =&gt; list.map(el =&gt; {
    const { category } = el;
  
    return (
      &lt;MenuItem
        text={category}
        key={category}
      /&gt;
    );
  });
  
  
  const Arrow = ({ text, className }) =&gt; {
    return (
      &lt;div
        className={className}
      &gt;{text}&lt;/div&gt;
    );
  };
  
  
  const ArrowLeft = Arrow({ text: '&lt;', className: 'arrow-prev' });
  const ArrowRight = Arrow({ text: '&gt;', className: 'arrow-next' });
  
  class HorizantScroller extends React.Component {
    state = {
      selected: 0
    };
  
    onSelect = key =&gt; {
      this.setState({ selected: key });
    }
  
  
    render() {
      const { selected } = this.state;
      // Create menu from items
      const menu = Menu(list, selected);
  
      return (
        &lt;div className="HorizantScroller"&gt;
          &lt;ScrollMenu
            data={menu}
            arrowLeft={ArrowLeft}
            arrowRight={ArrowRight}
            selected={selected}
            onSelect={this.onSelect}
            onClick={onClick}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default HorizantScroller;
  
  
  
  </code></pre>