title: How can I filter an array based on a category in react?
body: <p>I'm learning React and trying to figure out how I can filter an array based on categories. </p>
  
  <p>The data I'm working with is something like this here: 
  <a href="http://www.mocky.io/v2/5c2bd5683000006900abaff9" rel="nofollow noreferrer">http://www.mocky.io/v2/5c2bd5683000006900abaff9</a></p>
  
  <p>So I'm able to filter out all of the categories using this: </p>
  
  <pre><code>getTheCats() {
      const cats = [...new Set(this.getVehicleData().map(v =&gt; v.category))];
      const catsR = cats.filter(c =&gt; c).map((category, i) =&gt; {
          // console.log(this.props.vehicle);
  
          return (
              &lt;Col
                  xs="12"
                  key={i}
                  onClick={() =&gt; this.getCategories(category)}
                  className={
                      this.state.category === category
                          ? 'border-bottom p-15 active'
                          : 'border-bottom p-15 not-active'
                  }
              &gt;
                  &lt;FontAwesomeIcon
                      icon={this.state.active ? faMinusCircle : faPlusCircle}
                  /&gt;
                  &lt;h5 className=""&gt; {category} &lt;/h5&gt;
                  &lt;SpecsDetails
                      key={this.props.vehicle.id}
                      vehicle={this.props.vehicle}
                  /&gt;
              &lt;/Col&gt;
          );
      });
      return (
          &lt;Row className="deal-details__specs accoridon-heading" id="specs"&gt;
              {catsR}
          &lt;/Row&gt;
      );
  }
  </code></pre>
  
  <p>This gives me all of my individual categories. But what I need to do now is get all of these into an accordion. So the category is actually the heading of the accordion. How can I get all of the data that matches each category? </p>