title: Filtering an array of objects by a set list price ranges and other options
body: <p>I have an array of objects with the following structure:</p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;id&quot;:&quot;3c97d11f-3feb-5af5-8092-b3f5c4a8257d&quot;,
    &quot;name&quot;:&quot;Ruffled striped organic cotton shirt&quot;,
    &quot;price&quot;:215,
    &quot;referralUrl&quot;:&quot;link.com&quot;,
    &quot;imageUrl&quot;:&quot;//images.url&quot;,
    &quot;imageHeight&quot;:3000,
    &quot;imageWidth&quot;:2000,
    &quot;imageSrcSet&quot;: [....],
    &quot;imageSrcSetSizes&quot;:[&quot;(max-width: 667px) 100vw, 667px&quot;],
    &quot;created&quot;:&quot;2020-11-01T22:37:17.927Z&quot;,
    &quot;tags&quot;:[],
    &quot;categories&quot;:[&quot;Clothes&quot;],
    &quot;colours&quot;:[&quot;Neutrals&quot;],
    &quot;shopResponsibly&quot;:[]
  },
  {
    ...,
    price:1000,
    ...
  }
  </code></pre>
  <p>And I have a filter that loops through all the filters I have setup as follows:</p>
  <pre><code>const multiFilter = (item, condition) =&gt; {
    const filterKeys = Object.keys(condition)
    return item.filter((eachObj) =&gt; {
      return filterKeys.every((eachKey) =&gt; {
        if (!condition[eachKey].length) {
          return true // passing an empty filter means that filter is ignored.
        }
  
        return condition[eachKey]
          .toString()
          .toLowerCase()
          .includes(eachObj[eachKey].toString().toLowerCase())
      })
    })
  }
  </code></pre>
  <p>Now this works perfectly when my filters object is of single values and arrays, but I when I try to select a price filter the <code>condition[eachKey]</code> comes back as undefined and then the page fails. I'm certain it's to do with how I have my form fields values setup for prices and how they get pushed to the filters state object.</p>
  <p>Here is how I have constructed my price filter HTML:</p>
  <pre><code>&lt;form&gt;
              &lt;label&gt;
                &lt;input
                  type=&quot;radio&quot;
                  name=&quot;prices&quot;
                  value='{&quot;rangeFrom&quot;:0,&quot;rangeTo&quot;:50}'
                  onChange={(e) =&gt; handleChange(e)}
                /&gt;
                Up to &amp;pound;50
              &lt;/label&gt;
  
              &lt;label&gt;
                &lt;input
                  type=&quot;radio&quot;
                  name=&quot;prices&quot;
                  value='{&quot;rangeFrom&quot;:50,&quot;rangeTo&quot;:100}'
                  onChange={(e) =&gt; handleChange(e)}
                /&gt;
                &amp;pound;50 - &amp;pound;100
              &lt;/label&gt;
  
              &lt;label&gt;
                &lt;input
                  type=&quot;radio&quot;
                  name=&quot;prices&quot;
                  value='{&quot;rangeFrom&quot;:100,&quot;rangeTo&quot;:250}'
                  onChange={(e) =&gt; handleChange(e)}
                /&gt;
                &amp;pound;100 - &amp;pound;250
              &lt;/label&gt;
  
              &lt;label&gt;
                &lt;input
                  type=&quot;radio&quot;
                  name=&quot;prices&quot;
                  value='{&quot;rangeFrom&quot;:250,&quot;rangeTo&quot;:500}'
                  onChange={(e) =&gt; handleChange(e)}
                /&gt;
                &amp;pound;250 - &amp;pound;500
              &lt;/label&gt;
  
              &lt;label&gt;
                &lt;input
                  type=&quot;radio&quot;
                  name=&quot;prices&quot;
                  value='{&quot;rangeFrom&quot;:500}'
                  onChange={(e) =&gt; handleChange(e)}
                /&gt;
                &amp;pound;500+
              &lt;/label&gt;
  
              &lt;label&gt;
                &lt;input
                  type=&quot;radio&quot;
                  name=&quot;prices&quot;
                  value=&quot;all&quot;
                  onChange={(e) =&gt; handleChange(e)}
                /&gt;
                All
              &lt;/label&gt;
            &lt;/form&gt;
  </code></pre>
  <p>This is my <code>handleChange</code> function:</p>
  <pre><code>const handleChange = (e) =&gt; {
      e.persist()
  
      const fieldname = e.target.name
      const options = [...filters[fieldname]]
  
      if (e.target.checked) {
        options.push(e.target.value)
      } else {
        let index = options.indexOf(e.target.value)
        options.splice(index, 1)
      }
  
      setFilters({ ...filters, [fieldname]: options })
    }
  </code></pre>
  <p>Which produces an object similar to:</p>
  <pre><code>{
      categories: ['cat1', 'cat'],
      colours: ['blue', 'red, 'green'],
      other: ['thing', 'foo'],
      price: ['{&quot;rangeFrom&quot;:250,&quot;rangeTo&quot;:500}']
  }
  </code></pre>
  <p>I can't figure out how to modify the multiFilter function to accept the price array and for it to look at the <code>rangeFrom</code> and <code>rangeTo</code> values and filter the products price by the selected range.</p>
  <p>Any ideas?</p>
  <p>Thanks</p>