filter array doesn't work in React component

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

Drew Reese · Accepted Answer · 2021-11-14 07:21:18Z

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
      )
    });
  }
};

Collectives™ on Stack Overflow

filter array doesn't work in React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related