reactjs proper use of functions and hooks - I get errors - reactjs

Question

I finally got a function to compile, but when I call it from within an event handler errors start flying!
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.
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:
You might have mismatching versions of React and the renderer (such as React DOM)dom16.14.0 and react 64.2
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.
▶ 2 stack frames were collapsed.
...
GetAssetTypeNameFunction
C:/React-Springboot-CRUD-App/react-frontend/src/Services/GetAssetTypeNameFunction.js:7
const GetAssetTypeNameFunction = (props) =>{
const { assettype_assettypeId } = props;
> const [assetType,setAssetType] = useState()
AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =>
setAssetType(res.data));View compiled
ListAssetsComponent.editAssets
C:/React-Springboot-CRUD-App/react-frontend/src/components/ListAssetsComponent.jsx:62
editAssets(assetsid,assettype_assettypeId){
> if (GetAssetTypeNameFunction(assettype_assettypeId) === "Tower")
{
this.props.history.push(`/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`);
}
...
Button in a Rendered List. onClick calls code that references function 'GetAssetTypeNameFunction'
...
<button onClick={ () => this.editAssets(assets.assetsid, assets.assettype_assettypeId)} className="btn btn-info">Update </button>
editAssets(assetsid,assettype_assettypeId){
if (GetAssetTypeNameFunction(assettype_assettypeId) === "Tower")
{this.props.history.push(`/add-assetstower${assetsid}/this.props.match.params.sitemasterid`);}
}
...
Finally the GetAssetTypeNameFunction function that is called:
...
import React, { useState} from 'react';
import AssetTypeService from './AssetTypeService'
const GetAssetTypeNameFunction = (props) =>{
// destructuring
const { assettype_assettypeId } = props;
const [assetType,setAssetType] = useState()
AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =>
setAssetType(res.data));
const arrayMap = assetType.map((post)=>{
return(
<ul>
{post.assettypeName}
</ul>
);})
return (
{arrayMap}
);
}
export default GetAssetTypeNameFunction;
...
I am new to the use of functions. I saw a reference that said: "Do not call in event handlers".

Answer 1

try this
import React, { useState} from 'react';
import AssetTypeService from './AssetTypeService'
const GetAssetTypeNameFunction = (props) =>{
const { assettype_assettypeId } = props;
const [assetType,setAssetType] = useState([])
useEffect(() => {
AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =>
setAssetType(res.data)).catch((error) => {
console.error('Error:', error);
});
}, [])
return (
<>
{
assetType.length > 0 ? assetType.map((post) => {
<ul>
{post.assettypeName}
</ul>
})
:
null
}
</>
)
export default GetAssetTypeNameFunction ;