CODEWITHSUNDEEP
reactjsfunctionrefactoringuse-state
HighwayRob
HighwayRob

Reputation: 139

Reactjs refactoring a component to a function

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;**

...

Upvotes: 0

Views: 209

Answers (2)

igmani
igmani

Reputation: 236


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;

...

Upvotes: 1

Ditsche
Ditsche

Reputation: 1

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>)

Upvotes: 0

Related Questions