title: convert react function to typescript
body: <p>I'm quite new to typescript and I was hoping someone could help me convert my react function to typescript. It's a sort array that should take in a string a value as param and sort my data by that value.</p>
  <p>Currently the errors I'm getting an <code>Parameter type is implicity any</code> on the <code>type</code> param and the same error on <code>const sortProperty = types[type]</code>. Not sure how to typescript-tify so would appreciate the help.</p>
  <p>The function in question:</p>
  <pre><code> const sortArray = (type) =&gt; {
    const types = {
      state: 'state',
      brewery_type: 'brewery_type',
    };
    const sortProperty = types[type];
    const sorted = [...response].sort((a, b) =&gt; b[sortProperty] - a[sortProperty]);
    setResponse(sorted);
  };
  
  sortArray(sortType)
  </code></pre>
  <p>The rest of the page:</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import './App.css';
  import beer from './beerMug.png';
  import useFetch from './api/useFetch';
  import axios from 'axios';
  
  type ResponseType = {
    response: Object[] | Object, 
    error: string
  }
  
  type Breweries = {
    id: number;
    name: string;
    brewery_type: string;
    state: string;
  } 
  
  type SortTypes = {
    state: string;
    brewery_type: string;
  }
  
  function App() {
  
    const [response, setResponse] = useState&lt;any&gt;([]);
    const [error, setError] = useState&lt;any&gt;(null);
    const [sortType, setSortType] = useState(&quot;name&quot;);
    // const { response, error }: { response: object, error: string} = useFetch(&quot;https://api.openbrewerydb.org/breweries&quot;);
  
  
    useEffect(() =&gt; {
      const fetchData = async () =&gt; {
       try {
         const res = await axios.get(&quot;https://api.openbrewerydb.org/breweries&quot;);
         setResponse(res.data);
         } catch (error) {
         setError(error);
       }
     }
  
     fetchData();
   }, []);
  
   const sortArray = (type: string) =&gt; {
    const types = {
      state: 'state',
      brewery_type: 'brewery_type',
    };
    const sortProperty: SortTypes = types[type];
    const sorted = [...response].sort((a, b) =&gt; b[sortProperty] - a[sortProperty]);
    setResponse(sorted);
  };
  
  sortArray(sortType);
  
    console.log(response);
  
    const mapper = () =&gt; {
      if(response instanceof Array){
          return (
            &lt;&gt;
            {response.map((item: Breweries) =&gt; (
                &lt;div className=&quot;item&quot; key={item.id}&gt;
                  &lt;ul&gt;
                  &lt;li&gt;{item.name}&lt;/li&gt;
                  &lt;li&gt;{item.state}&lt;/li&gt;
                  &lt;li&gt;{item.brewery_type}&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              ))}
            &lt;/&gt;
          )
      }
    }
  
    return (
      &lt;div&gt;
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;header&quot;&gt;
            &lt;img src={beer} className=&quot;image&quot; /&gt;
            &lt;h1&gt;Sherman Brewery&lt;/h1&gt;
            &lt;img src={beer} className=&quot;image&quot; /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;selectContainer&quot;&gt;
            &lt;select name=&quot;brewer&quot; id=&quot;brewer&quot; onChange={(e) =&gt; setSortType(e.target.value)}&gt;
            &lt;option value=&quot;&quot; defaultValue=&quot;Sort By:&quot; disabled hidden&gt;Sort By:&lt;/option&gt;
              &lt;option value=&quot;1&quot;&gt;State&lt;/option&gt;
              &lt;option value=&quot;2&quot;&gt;Type&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
              {mapper()}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  ``
  </code></pre>