filter array doesn't work in React component - reactjs

Question

I wanna sort the sizes of my clothes but when I click to elect the size, no matter what I choose, it stays "All"...Is there anything wrong with my function filterProducts?
function Filter(props) {
return (
<div className="filter">
<div className="filter-result">{props.count} Products</div>
<div className="filter-sort">
Order
<select value={props.sort} onChange={props.sortProducts}>
<option value="latest">Latest</option>
<option value="lowest">Lowest</option>
<option value="highest">Highest</option>
</select>
</div>
<div className="filter-size">
Filter
<select value={props.size} onChange={props.filterProducts}>
<option value="">All</option>
<option value="">XS</option>
<option value="">S</option>
<option value="">M</option>
<option value="">L</option>
<option value="">XL</option>
<option value="">XXL</option>
</select>
</div>
</div>
);
}
My codesand link:https://codesandbox.io/s/redux-shop-cart-forked-tlpek?file=/src/App.js

Answer 1

All the size options were missing unique value props, they were all value="".
Update the value props to match your data:
Filter
<select value={props.size} onChange={props.filterProducts}>
<option value="">All</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
You also had a typo in filterProducts in App where you reset the state to a product property instead of products. This wasn't allowing the "All" filter value to work.
filterProducts = (event) => {
if (event.target.value === "") { // all
this.setState({
size: event.target.value,
products: data.products // <-- reset products!!
});
} else {
this.setState({
size: event.target.value,
products: data.products.filter(
(product) => product.availableSizes.indexOf(event.target.value) >= 0
)
});
}
};