title: How to filter JSON data from API and setState in React
body: <p>Upon clicking a filter button, the first filter returns the correct data, but the array in state is mutated (or destroyed?) when a second filter method is called. I'm using setState for each function and cannot figure out why the array's initial state is not restored.</p>
  
  <p>This app is working when I import a local copy of the JSON data. The blocks of commented code do indeed show that the filter functions work with the local data, but not with the same JSON data returned by the fetch method from my server.</p>
  
  <pre><code>import React from "react";
  import { Button, Row, Col } from "react-bootstrap";
  import AutoList from './AutoList';
  // import autoData from '../autoData.json';
  
  const API = "https://MY_SERVER/autoData.json";
  
  class GetAutos extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        autos: [],
      };
    }
  
    fetchAutoData() {
        fetch(API)
          .then(autoData =&gt; autoData.json())
          .then(autoData =&gt;
              this.setState({
                  autos: autoData, 
                  isLoading: false,
              })
          )
          .catch(error =&gt; this.setState({ error, isLoading: false }));
  
    }
  
    componentDidMount() {
        this.fetchAutoData();
        // this.setState(() =&gt; ({ autos: autoData }));
    }
  
  
    render() {
  
      const { autos } = this.state;
  
      let onResetArray = () =&gt; {
          this.setState({ autoData: this.state.autos })
          //console.log(autos)
        }
  
      let filterFord = () =&gt; {
          const fordAutos = autos.filter( (auto) =&gt; auto.title.includes("Ford"));
          // const fordAutos = autoData.filter( (auto) =&gt; auto.title.includes("Ford"));
  
          this.setState({ autos: fordAutos });
      }
  
  
      let filterChevy = () =&gt; {
          const chevyAutos = autos.filter( (auto) =&gt; auto.title.includes("Chevrolet"));
          // const chevyAutos = autoData.filter( (auto) =&gt; auto.title.includes("Chevrolet"));
  
          this.setState({ autos: chevyAutos });
      }
  
      let filterJeep = () =&gt; {
          const jeepAutos = autos.filter( (auto) =&gt; auto.title.includes("Jeep"));
          // const jeepAutos = autoData.filter( (auto) =&gt; auto.title.includes("Jeep"));
  
          this.setState({ autos: jeepAutos });
      }
      return (
          &lt;div className="container"&gt;
              &lt;Row className="mb-4"&gt;
                  &lt;Col&gt;
                      &lt;Button event-key="reset-autos" onClick={onResetArray}&gt;All Cars&lt;/Button&gt;
                  &lt;/Col&gt;
                  &lt;Col&gt;
                      &lt;Button event-key="ford-autos" onClick={filterFord}&gt;Filter Ford&lt;/Button&gt;
                  &lt;/Col&gt;
                  &lt;Col&gt;
                      &lt;Button event-key="chevy-autos" onClick={filterChevy}&gt;Filter Chevy&lt;/Button&gt;
                  &lt;/Col&gt;
                  &lt;Col&gt;
                      &lt;Button event-key="jeep-autos" onClick={filterJeep}&gt;Filter Jeep&lt;/Button&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
  
  
          &lt;AutoList autos={ this.state.autos } /&gt;
          &lt;/div&gt;
  
      );
    }
  }
  export default GetAutos;
  </code></pre>
  
  <p>I expect a subsequent button click to filter the data set in state. Instead, the click filters the array created by the .filter() method. My code works with a local import of my JSON data, but not with the fetched JSON.</p>