How can use useState() with Flatlist data?

Question

I've had a problem when i used useState(). i have to filter by searched words on my data and list.

i need to define my data list with State (i'd list with searched words) but when i use State, i've taken 'Invalid Hook' error.

let [list, setList] = useState(data);

//called
data={list}

I don't find where i use that , I couldn't fix for 3 days, i can't reach next step :( I hope i'll fix with expert helps...

import React, {Component, useState} from 'react'
import {
  Text,
  StyleSheet,
  View,
  FlatList,
  SafeAreaView,
  ScrollView,
  Image,
  TextInput,
} from 'react-native'
import data from '../../data'

export default class Flatlistexample extends Component {
  render () {
    //defined below
    let [list, setList] = useState(data);

    seachFilter=(text)=>{
      
      const newData = data.filter(item=>{
        const listitem= `${item.name.toLowerCase()} ${item.company.toLowerCase()}`;

        return listitem.indexOf(text.toLowerCase())
      })
    };
    
    return (
      <SafeAreaView
        style={{
          flex: 1,
        }}>
        <FlatList

        //called
          data={list}

          renderItem={({item, index})=>{
      
            return (
              <ScrollView>
                <SafeAreaView
                  style={[
                    styles.container,
                    {backgroundColor: index % 2 === 0 ? '#fafafa' : '#bbb'},
                  ]}>
                  <Image style={styles.profile} source={{uri: item.picture}} />
                  <View style={styles.rightside}>
                    <Text style={styles.name}>{item.name}</Text>
                    <Text style={styles.company}>{item.company}</Text>
                  </View>
                </SafeAreaView>
              </ScrollView>
            )
          
        }}
          
          
          keyExtractor={item => item._id}
          
          ListHeaderComponent={() => {
            const [search, setSearch] = useState('');
            
            
            return (
              
              <View style={styles.seachContainer}>
                <TextInput
                  style={styles.textInput}
                  placeholder={'Search...'}
                  value={search}
                  onChangeText={text=>{
                    setSearch(text)
                  }}
                  ></TextInput>
              </View>
            )
          }}
          
        />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: 'gray',
  },
  profile: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginLeft: 10,
  },
  rightside: {
    marginLeft: 20,
    justifyContent: 'space-between',
    marginVertical: 5,
  },
  name: {
    fontSize: 22,
    marginBottom: 10,
  },
  searchContainer: {
    padding: 10,
    borderWidth: 2,
    borderColor: 'gray',
  },
  textInput: {
    fontSize: 16,
    backgroundColor: '#f9f9f9',
    padding: 10,
  },
})

Thank you

Answer 1

React hooks can be used with functional component only, here you are using class component

You need to understand the difference between functional component and class component first.

Here you are using class component so your state should be manageed in the following way

export default class Flatlistexample extends Component {
    constructor(props)
    {
        this.state={list:[]}
    }
}

and to update list

this.setState({list: <array of data>})

If you want to use hooks, your component needs to be changed something like the following:

const Flatlistexample = () => {
  //defined below
  let [list, setList] = useState(data);

  seachFilter = (text) => {
    const newData = data.filter(item => {
      const listitem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`;

      return listitem.indexOf(text.toLowerCase())
    })
  };

  return (
    <SafeAreaView
      style={{
        flex: 1,
      }}>
      <FlatList data={list} renderItem={Your flatlist Item}/>
    </SafeAreaView>
  )
}

export default Flatlistexample