title: useState Array of Objects
body: <p>I have a search box that I can copy and paste a column from excel. I parse the input and generate an array of the entries.</p>
  
  <p>I am then mapping over the entries and calling a custom hook with each item to fetch some data from my <code>graphql</code> endpoint.</p>
  
  <p>For example:</p>
  
  <p>3 entries are provided from the search box: </p>
  
  <p><code>["D38999/26", "LJT06RE25-61PA", "D38999/46FJ61AA"]</code></p>
  
  <p>The <code>fetchData</code> function receives one of these items at a time as the query parameter. Currently, this process would return 3 separate objects as such:</p>
  
  <pre class="lang-js prettyprint-override"><code>{query: "D38999/26", cables: Array(35)}
  {query: "LJT06RE25-61PA", cables: Array(1)}
  {query: "D38999/46FJ61AA", cables: Array(1)}
  </code></pre>
  
  <p>How do I set up a react hook to allow me to append each object into the <code>result</code> State as an array of objects?</p>
  
  <p>My end goal would be an array of objects like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>[
  {query: "D38999/26", cables: Array(35)},
  {query: "LJT06RE25-61PA", cables: Array(1)},
  {query: "D38999/46FJ61AA", cables: Array(1)}
  ]
  </code></pre>
  
  <p>This is my current custom hook to resolve my API endpoint</p>
  
  <pre class="lang-js prettyprint-override"><code>const useCableMatch = () =&gt; {
    const [result, setResult] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isError, setIsError] = useState(false);
    const client = useApolloClient();
  
    const fetchData = async query =&gt; {
      setIsError(false);
      setIsLoading(true);
      try {
        const { data } = await client.query({
          query: GET_VALID_CABLE,
          variables: { pn: `%${query}%` },
        });
  
        const response = { query, ...data };
        console.log('response:', response);
  
        setResult(response);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };
  
    return [{ result, isLoading, isError }, fetchData];
  };
  </code></pre>
  
  <p>Currently <code>setResult</code> is set up to only return a single object from response. I would like to return an array with each object generated appended to the existing array of objects.</p>