React-Native Invalid hook call for Flat List Render Item

Question

So i have a react-native flat list where i use hooks in each FlatList renderItem, something like this,

export const RenderEntityList = (props) => {
    const { entityList } = props;
    const getEntityName = useCallBack((entity) => {
        //...get Entity name from list
    }, [entityList]);
    return <FlatList
              data={entityList}
              renderItem={RenderEntity({ getEntityName })}
           />
};


const RenderEntity = (props) => {
    const { getEntityName } = props;
    return (props) => {
        const { item: entity } = props;
        // This is where i get the error Invalid hook call;
        const [entityName, setEntityName] = useState('');
        useEffect(() => {
            setEntityName(getEntityName(entity))
        }, [entity])
        return <ListItem
                  title={entityName}
               />
};

I am not sure what exactly i am doing wrong. Any help on the same would be highly appreciated.

Thanks Regards. Amol

Answer 1

You are using RenderEntity as function instead of a functional component :

Change this

renderItem={RenderEntity({ getEntityName })}

With :

renderItem={({item, index, separators}) => <RenderEntity item={item} getEntityName={getEntityName}/> }