React JS Error: Incorrect attempt to destroy an instance without iterations

Question

I have a sort filter that takes an array to populate the parameters. Trying to see the value parameter equal to the text inside the array, but I get an error in the header:

 Invalid attempt to destructure non-iterable instance 

I need to pass the text as the value in the parameter tag, so that when updating the filter, the correct text is displayed on the user selected.

Here is my 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) => { const [text, by, order] = opts[i]; refresh({so: {[by]: order}}); /* GA TRACKING */ ga('send', 'event', 'My Shop Sort By', text, 'Used'); }; return ( <div className={cn(shop.sorting, rp.sorting.fill && shop.sortingFill)}> <Select className={shop.sortingSelect} label="Sort By" onChange={onChange} value={`${by}:${order}`}> {opts.map(([text], i) => <Option key={i} value={text}>{text}</Option> )} </Select> </div> ) } 

Answer 1

You don't pass an argument along with your onChange, this is a fairly common thing to skip, but a little less obvious with the select / option combination.

It should look something like this:

 class Sorting extends React.Component { constructor(props) { super(props); this.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'], ]; this.state = { selected: 0, // default value } this.onChange = this.onChange.bind(this); } onChange(i) { const [text, by, order] = opts[i.target.value]; }; render() { return ( <div> <select onChange={this.onChange} value={this.state.selected}> {this.opts.map(([text], i) => <option key={i} value={i}>{text}</option> )} </select> </div> ) } } ReactDOM.render(<Sorting />, document.getElementById("a")); 

Note I deleted your classes and styles to make it simple. Also note that you used uppercase letters and the option - if they are not common in home components, they must be lowercase.

Note2 I also presented the state because the selection state must be saved somewhere - if you maintain the state of the selection field outside this component, you can obviously use the details / callbacks combination to keep this value one level higher.

http://codepen.io/cjke/pen/egPKPB?editors=0010

Answer 2

The problem with the variable i , I will be an object event, use i.target.value to get the value selected by the user, one more thing you used text as the options value, use index instead, it will work, try the following:

 const onChange = (i) => { const [text, by, order] = opts[i.target.value]; refresh({so: {[by]: order}}); /* GA TRACKING */ ga('send', 'event', 'My Shop Sort By', text, 'Used'); }; return ( <div className={cn(shop.sorting, rp.sorting.fill && shop.sortingFill)}> <select className={shop.sortingSelect} label="Sort By" onChange={onChange} value={`${by}:${order}`}> {opts.map(([text], i) => <option key={i} value={i}>{text}</option> )} </select> </div> ) 

Note this fiddle : https://jsfiddle.net/5pzcr0ef/