title: Filtering through an API with Axio & React
body: <p>My problem is simple but I am missing some part of this filtering process.
  I am trying to set my component state to whatever value I am giving to my checkbox input and return my state only if the value matches my data array in the API after a click event.</p>
  
  <p>Though it logs the data correctly in my Chrome Console but I’ve been trying hard to set my logged data into my component state and without any success…</p>
  
  <p>My end goal is to :</p>
  
  <p>Part 1- Output the correct data in my component state after a click event.</p>
  
  <p>Part 2- Get the initial data after the input has been unchecked.</p>
  
  <p>Part 3- Being able to output multiple datas if more than 1 checkbox is checked.</p>
  
  <p>Part 1 Code</p>
  
  <pre><code>  handleFilterButtons = (event) =&gt; {
    var valueInput = event.target.value;
    var apiFilters = `https://backend.greatsaigon.com/api/v1/en/venues`;
    axios.get(apiFilters)
      .then( (response) =&gt;{
        this.setState({
          result: response.data.filter((req) =&gt; {
            if (req.options.beauty.hair.treatment !== "0") {
              req.options.beauty.hair.treatment.filter((res) =&gt; {
                if (res === valueInput) {
                    console.log(req)
                  }
                })
              } 
            })
          })      
      })
    .catch(function (error) {
      console.log(error);
    })
  }
  </code></pre>