Invalide hook call, Hooks can only be calle inside of the body of a function component-CodePudding

i created a functionnal component

import React from 'react';
import { View, ScrollView, Text, SafeAreaView } from 'react-native';
import { useState, useEffect } from 'react';

const listFiliere = ({item}) => {
    const [show, setShow] = useState(false);

    return(
        <View style={{ height: 30, flex: 1, justifyContent: 'center', borderBottomWidth: 1, borderBottomColor: 'blue' }}>
            <Text>{ item.name }</Text>
        </View>
    );
}

export default listFiliere

I called this one inside class component for renderItem of flatlist; and it return error of invlide hook call; Is the class component which called it the cause or anything else?

CodePudding user response：

it could be a few things. the code you posted is not a lot to go on. Take a look at this page. A few things you can check

CodePudding user response：

If the problem is that you are calling useState in a class component, please reference this post.

Basically, you cannot use the useState hook in a class component. The class component equivalent would be:

export class ListFiliere extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  render() {
    return(
        <View style={{ height: 30, flex: 1, justifyContent: 'center', borderBottomWidth: 1, borderBottomColor: 'blue' }}>
            <Text>{ item.name }</Text>
        </View>
    );
  }
}