Reactjs refactoring a component to a function - reactjs

Question

I am trying to convert the following Component into Function.
I need it to accept or access one parameter, do a database lookup and return a String.
I get the following compile errors implying I have incorrect syntax for a function. Any help completing the new function would be appreciated!
Errors:
src\Services\getAssetTypeNameFunction.js
Line 5:45: React Hook "useState" is called in function "getAssetTypeNameFunction" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks
Line 11:13: 'assettype' is not defined
New Function Code
...
import React, { useState} from 'react';
import AssetTypeService from './AssetTypeService'
const getAssetTypeNameFunction = () =>{
const [assettype_assettypeId,setData] = useState('assettype_assettypeId')
AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =>
{let assettype = res.data;
});
return (
<ul>
{assettype.assettypeName}
</ul>
);
}
export default getAssetTypeNameFunction;
...
Old Component Code that worked..
...
**import React, { Component } from 'react';
import AssetTypeService from '../Services/AssetTypeService'
class GetAssetTypeNameComponent extends Component {
constructor (props){
super(props)
this.state = {
assettype:[]
}
}
componentDidMount()
{
AssetTypeService.getAssetTypeById(this.props.datafromparent).then( (res) =>{
let assettype = res.data;
this.setState({isLoading:false});
this.setState({
assettypeName: assettype.assettypeName,
assettypeType: assettype.assettypeType
});
});
}
render() {
return (
<div>
{this.state.assettypeName}
</div>
);
}
}
export default GetAssetTypeNameComponent;**
...

Answer 1

New function code:
...
import React, { useState, useEffect} from 'react';
import AssetTypeService from './AssetTypeService'
function GetAssetTypeNameFunction() {
const [assettype, setAssetType] = useState(null)
useEffect( () => {
AssetTypeService.getAssetTypeById(assettype_assettypeId).then((res) => {
setAssetType(res.data);
});
}, []);
if(!assettype)
return (<ul>loading...</ul>)
return (<ul>assettype.assettypeName</ul>);
}
export default GetAssetTypeNameFunction;
...

Answer 2

In your Componenent you used componentDidMount to fetch data.
You could the useEffect Hook in your function to have the same effect
https://reactjs.org/docs/hooks-effect.html
useEffect takes two parameters, a function that gets called and a dependencies array.
if you pass in an empty array into as dependencies, your function gets only called on after your function gets mounted
const [assettype, setAssetType] = useState(null)
useEffect( () => {
AssetTypeService.getAssetTypeById(assettype_assettypeId).then((res) => {
setAssetType(res.data);
});
}, [])
if(!assettype)
return (<ul>loading...</ul>
return (<ul>assettype.assettypeName</ul>)