title: How to filter elements using React, Graphql and Apollo with es6
body: <p>I have a React project with a GraphQL using Apollo client. I am trying to figure out how to change the query result based on search text. I implemented query search in backend and its working perfectly. 
  But I dont know how to set up filter in React using that same query. 
  Despite there is tutotial on how to filter on <a href="https://www.howtographql.com/react-apollo/7-filtering-searching-the-list-of-links/" rel="nofollow noreferrer">https://www.howtographql.com/react-apollo/7-filtering-searching-the-list-of-links/</a>, it doesnt use ES6 and I literaly dont know how to do it. Im stuck on this filter around 10 days.</p>
  
  <p>I will show you my code.</p>
  
  <p>App.js </p>
  
  <pre><code>import React from 'react';
  import HeroesDota from './components/HeroesDota';
  import Search from './components/HeroSearch'
  
  import { ApolloProvider } from '@apollo/react-hooks';
  
  import { ApolloClient } from "apollo-client";
  import { InMemoryCache } from "apollo-cache-inmemory";
  import { HttpLink } from "apollo-link-http";
  
  
  const cache = new InMemoryCache();
  const link = new HttpLink({
    uri: "http://localhost:8000/graphql/"
  });
  
  const client = new ApolloClient({
    cache,
    link
  });
  
  
  const App = () =&gt; {
  
  return (
      &lt;ApolloProvider client={client}&gt;
        &lt;Search /&gt;
        &lt;HeroesDota /&gt;
      &lt;/ApolloProvider&gt;
  )};
  
  export default App;
  </code></pre>
  
  <p>HeroesDota.js  (compoenent)</p>
  
  <pre><code>import React from 'react'
  import gql from "graphql-tag";
  import { useQuery } from '@apollo/react-hooks';
  import '../index.css'
  import styled from 'styled-components';
  
  const Images = styled.img`
      margin:0;
      border: 3px solid #288eea;
      display: inline;
      width: 90px;
      height: 50px;
  `
  const HEROES_DOTA2 = gql`
      query {
          heroes {
              name
              heroType
              image
          }
      }
  `;
  
  
  const HeroesDota = () =&gt; {
      const { loading, error, data } = useQuery(HEROES_DOTA2);
  
      if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
      if (error) return &lt;p&gt;Error :(&lt;/p&gt;;
  
      return data.heroes.map(({name, heroType, image }) =&gt; (
        &lt;div className="row" key={Math.random() + 1}&gt;
          &lt;div className="column"&gt;
            &lt;button className="button-hero"&gt;&lt;Images className="hero_images" src= {`${image}`} alt={name}&gt;&lt;/Images&gt;&lt;/button&gt;
              &lt;div className="hero_info"&gt;{name} - {heroType}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      ));
  }
  
  export default HeroesDota;
  </code></pre>
  
  <p>HeroSearch.js (compoenent that doesnt work as I expected)</p>
  
  <pre><code>import React, { useState } from 'react'
  import gql from "graphql-tag";
  import { withApollo } from 'react-apollo'
  import Hero from './HeroesDota'
  import '../index.css'
  
   const SEARCH_HEROES = gql`
       query ($search: String) {
           heroes (search: $search) {
               id
               name
           }
       }
   `;
  
  const Search = () =&gt; {
  
      const [heroes, setHeroes] = useState([])
      const [search, setSearch] = useState('')
  
  
      const _executeSearch = async () =&gt; {
          const { search } = search
          const result = await this.props.client.query({
            query: SEARCH_HEROES,
            variables: { search },
          })
          const heroes = result.data.heroes.name
          setHeroes({ heroes })
      }
  
      return (
          &lt;div&gt;
            &lt;div&gt;
              Search
              &lt;input
                type='text'
                onChange={e =&gt; setSearch({ search: e.target.value })}
              /&gt;
              &lt;button onClick={() =&gt; _executeSearch()}&gt;OK&lt;/button&gt;
            &lt;/div&gt;
            {heroes.map((hero, index) =&gt; (
              &lt;Hero key={hero.id} hero={hero} index={index} /&gt;
            ))}
          &lt;/div&gt;
        )
      }
  
  export default withApollo(Search)
  </code></pre>
  
  <p>After U oress OK button to exectue search i get following error.
  Unhandled Rejection (ReferenceError): Cannot access 'search' before initialization.</p>
  
  <p>If I try to do something similar like I did in Component HeroesDota i still cant make it.</p>
  
  <p>Does anyone know how to filter query in React using es6, not class based compoenent like they did on this tutorial.</p>
  
  <p>Thanks </p>