title: reactjs proper use of functions and hooks - I get errors
body: <p>I finally got a function to compile, but when I call it from within an event handler errors start flying!</p>
  <p>The calling code and function is below.
  The objective was to get a function to return a 'assettype' as a string and use that String to make a make routing decision.
  What am I missing here?
  Any chance of some guidance.</p>
  <p>Here are the errors:
  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)dom16.14.0 and react 64.2</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app
  See <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html" rel="nofollow noreferrer">https://reactjs.org/warnings/invalid-hook-call-warning.html</a> for tips about how to debug and fix this problem.</li>
  </ol>
  <p>▶ 2 stack frames were collapsed.
  ...</p>
  <pre><code>GetAssetTypeNameFunction
  C:/React-Springboot-CRUD-App/react-frontend/src/Services/GetAssetTypeNameFunction.js:7
    const GetAssetTypeNameFunction = (props) =&gt;{
    const { assettype_assettypeId } = props;
  &gt;  const [assetType,setAssetType] = useState()
     
    AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =&gt;
    setAssetType(res.data));View compiled
  
  ListAssetsComponent.editAssets
  C:/React-Springboot-CRUD-App/react-frontend/src/components/ListAssetsComponent.jsx:62
      editAssets(assetsid,assettype_assettypeId){
  &gt;       if (GetAssetTypeNameFunction(assettype_assettypeId) === &quot;Tower&quot;)
         { 
           this.props.history.push(`/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`);
        }
  </code></pre>
  <p>...</p>
  <p>Button in a Rendered List. onClick calls code that references function 'GetAssetTypeNameFunction'
  ...</p>
  <pre><code>&lt;button onClick={ () =&gt; this.editAssets(assets.assetsid, assets.assettype_assettypeId)} className=&quot;btn btn-info&quot;&gt;Update &lt;/button&gt;
      
      editAssets(assetsid,assettype_assettypeId){
    if (GetAssetTypeNameFunction(assettype_assettypeId) === &quot;Tower&quot;)
    {this.props.history.push(`/add-assetstower${assetsid}/this.props.match.params.sitemasterid`);}
  }
  </code></pre>
  <p>...</p>
  <p>Finally the GetAssetTypeNameFunction function that is called:
  ...</p>
  <pre><code>import React, { useState} from 'react';
  import AssetTypeService from './AssetTypeService'
  
      const GetAssetTypeNameFunction = (props) =&gt;{
    // destructuring 
        const { assettype_assettypeId } = props;
        const [assetType,setAssetType] = useState()
      
      AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =&gt;
      setAssetType(res.data));
  
  const arrayMap = assetType.map((post)=&gt;{
  return(
         &lt;ul&gt; 
             {post.assettypeName}  
          &lt;/ul&gt;
  );})
  
      return (
          {arrayMap}
      );
  }
  export default GetAssetTypeNameFunction;
  </code></pre>
  <p>...</p>
  <p>I am new to the use of functions. I saw a reference that said: &quot;Do not call in event handlers&quot;.</p>
  <p><a href="https://i.stack.imgur.com/SBx2N.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SBx2N.jpg" alt="List with Update button that with onClick" /></a></p>