ERROR TypeError: keyword.toLowerCase is not a function. (In 'keyword.toLowerCase()', 'keyword.toLowerCase' is undefined)

Question

How can i fix this error which says that ERROR TypeError: keyword.toLowerCase is not a function. (In 'keyword.toLowerCase()', 'keyword.toLowerCase' is undefined) i am building a search user function using js filter in rn, so i am converting the searched keyword to lowercase but now i am facing this error how can i fix it? what did i do wrong?

i tried to use ToString method before lowercase method but it didn't works in my case, Can anyone can tell, Where i am wrong?

import { StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'
import { ScrollView, TextInput } from 'react-native-gesture-handler'
import { Ionicons } from '@expo/vector-icons';
import { formHead } from '../../CommonCss/FormCss';
import ChatCard from '../../Cards/ChatCard';



  const MainChat = ({ navigation }) => {
    
        const chats = [
   //  here is raw data of users i remove it bcs than code will hard to read the data was too long
            ]
    
        const [keyword, setKeyword] = useState('')
    
        return (
            <ScrollView style={styles.container}>
                <Ionicons name="arrow-back" size={24} color="grey" style={styles.backbtn}
                    onPress={() => navigation.navigate("mainpage")}
                />
                <View style={styles.searchSection}>
                    <Text style={formHead}>Your Chats</Text>
                    <TextInput placeholder='Search'
                        style={styles.searchbar}
                        onChange={(text) => setKeyword(text)}
                    />
                </View>
                <View style={styles.ChatSection}>
                    {
                        chats.filter(
                            (chat) => {
                                if (keyword == '') {
                                    return chat
                                }
                                else if (
                                    chat.username.
                                        toLowerCase().includes
                                        (keyword.toLowerCase())
                                ) {
                                    return chat
                                }
    
                            }
                        ).map((chat) => {
                            return <ChatCard key={chat.username} chat={chat} />
                        })
                    }
                </View>
            </ScrollView>
        )
    }
    
    export default MainChat

Answer 1

The TextInput should be like below. change onChangeText instead of onChange

<TextInput placeholder='Search'
   style={styles.searchbar}
   onChangeText={(text) => setKeyword(text)}
/>