TypeError: undefined is not a function (near '…currencyFilter.map…')

Question

I'm quite new to react native and trying to set up a search bar with search functionality. I'm trying to set it up where the list updates with each letter typed. The data is displayed fine but the error occurs when I try and type something into the search bar.

Full Error Message

https://ibb.co/Zd5hB52

Here is the file that is having issues

import { StyleSheet, Text, View, Button, StatusBar, ScrollView, TextInput } from "react-native";
import Icon from 'react-native-vector-icons/Ionicons';
import datas from "../components/CurrencyData"
import FavouritesList from "../components/FavouritesList";

const AddToFavourites = () => {

    const state = {
        datas: datas,
        filter: datas
    }

    const [currencyFilter, setSearch] = useState(state.filter)

    const getFlags = () => {
        return currencyFilter.map(data => {
            return <FavouritesList detail={data} key={data.id}/>
        })
    }

    const searchCurrencies = (searchFor) => {
        setSearch({
            filterCurrency: datas.filter(i=>
                i.name.toLowerCase().includes(searchFor.toLowerCase),
            ), 
        });
    }
    
    return (
        <View style={styles.container}>
            <View style= {styles.action}>
                <Icon name="search" size={25}/>

                <TextInput
                    style= {{flex: 1}}
                    placeholder= "Search..."
                    underlineColorAndroid="transparent"
                    onChangeText= {text => {searchCurrencies(text)}}
                />
            </View>

            <ScrollView>
                <StatusBar backgroundColor="#1E90FF" barStyle="light-content"/>
                {getFlags()}
            </ScrollView>
        </View>
        )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
    action: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 2,
        height: 50,
        borderRadius: 30,
        paddingLeft: "4%",
        paddingRight: "4%",
        margin: "3%"
      },
})

export default AddToFavourites;```


  [1]: https://i.stack.imgur.com/kWkHo.png

Answer 1

with hooks you don't pass the state object like setState, you just pass the new value

change

setSearch({
  filterCurrency: datas.filter(i => i.name.toLowerCase().includes(searchFor.toLowerCase)),
});

to

setSearch( datas.filter(I =>i.name.toLowerCase().includes(searchFor.toLowerCase)));