title: How to fix Filtering (map) on React
body: <p><strong>The problem is that the map function does not respond to value changes, and therefore does not show the filtered products. I think I messed up with the  properties</strong></p>
  <p><em>The filter used to work with type =&quot;radio&quot;. After I tried to redo the filter (change type=&quot;radio&quot; to  ), he stopped working. This is what Filter.jsx looked like before changing to select:</em></p>
  <pre><code>{values.map((n) =&gt; (
          &lt;label&gt;
            &lt;input
              className=&quot;with-gap&quot;
              type=&quot;radio&quot;
              onChange={() =&gt; onChange(n)}
              checked={value === n}
            /&gt;
            &lt;span&gt;{statusMap.get(n)}&lt;/span&gt;
          &lt;/label&gt;
        ))}
  </code></pre>
  <p><strong>Full React code example</strong></p>
  <p><em>Main.jsx</em></p>
  <pre><code>import React from &quot;react&quot;;
  import { Products } from &quot;../Products&quot;;
  import { Filter } from &quot;../Filter&quot;;
  
  class Main extends React.Component {
    state = {
      products: [],
      filteredProducts: [],
      status: &quot;all&quot;,
    };
  
    onFilterStatusChange = (status) =&gt; {
      this.setState({ status });
    };
  
    componentDidMount() {
      fetch(&quot;./products.json&quot;)
        .then((responce) =&gt; responce.json())
        .then((data) =&gt; this.setState({ products: Object.values(data) }));
    }
  
    filterProducts() {
      this.setState(({ status }) =&gt; ({
        filteredProducts:
          status === &quot;all&quot;
            ? this.state.products
            : this.state.products.filter((n) =&gt; n.prod_status?.includes(status)),
      }));
    }
  
    componentDidUpdate(prevProps, prevState) {
      if (
        this.state.status !== prevState.status ||
        this.state.products !== prevState.products
      ) {
        this.filterProducts();
      }
    }
  
    render() {
      return (
        &lt;main className=&quot;container content&quot;&gt;
          &lt;Filter
            values={[
              &quot;all&quot;,
              &quot;recommended&quot;,
              &quot;promotion&quot;,
              &quot;saleout&quot;,
              &quot;bestseller&quot;,
              &quot;new&quot;,
            ]}
            value={this.state.status}
            onChange={this.onFilterStatusChange}
          /&gt;
          &lt;Products products={this.state.filteredProducts} /&gt;
        &lt;/main&gt;
      );
    }
  }
  
  export { Main };
  
  </code></pre>
  <p><em>Filter.jsx</em></p>
  <pre><code>import statusMap from &quot;../statusMap&quot;;
  
  const Filter = ({ values, value, onChange }) =&gt; (
    &lt;div className=&quot;row filter_container&quot;&gt;
      &lt;h3 className=&quot;filter_title&quot;&gt;Sortować według&lt;/h3&gt;
      &lt;div className=&quot;input-field col s12&quot;&gt;
        &lt;select className=&quot;status_select&quot;&gt;
          {values.map((n) =&gt; (
            &lt;option onChange={() =&gt; onChange(n)} value={value === n} key={n}&gt;
              {statusMap.get(n)}
            &lt;/option&gt;
          ))}
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  
  export { Filter };
  
  </code></pre>
  <p><strong>Please, help me fix this filter</strong></p>