title: React JS Error: Invalid attempt to destructure non-iterable instance
body: <p>I have a sort filter that takes an array to populate the options. Trying to see the option <code>value</code> equal to the text within the array but I get the error within the title: </p>
  
  <pre><code>Invalid attempt to destructure non-iterable instance
  </code></pre>
  
  <p>I need to pass the text as the value within the option tag so that when the user updates the filter, the correct text displays to the choice the user made.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>function Sorting({by, order, rp}: SortingProps) {
      const opts = [
          ['Price (low)', 'price', 'asc'],
          ['Price (high)', 'price', 'desc'],
          ['Discount (low)', 'discount', 'asc'],
          ['Discount (high)', 'discount', 'desc'],
          ['Most popular', 'arrival', 'latest'],
          ['Most recent', 'arrival', 'latest'],
      ];
  
      const onChange = (i) =&gt; {
          const [text, by, order] = opts[i];
          refresh({so: {[by]: order}});
          /* GA TRACKING */
          ga('send', 'event', 'My Shop Sort By', text, 'Used');
      };
  
      return (
          &lt;div className={cn(shop.sorting, rp.sorting.fill &amp;&amp; shop.sortingFill)}&gt;
              &lt;Select className={shop.sortingSelect} label="Sort By" onChange={onChange} value={`${by}:${order}`}&gt;
                  {opts.map(([text], i) =&gt;
                      &lt;Option key={i} value={text}&gt;{text}&lt;/Option&gt;
                  )}
              &lt;/Select&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>