Why did I get: TypeError: Cannot read property 'toLowerCase' of undefined (React JS)

Question

Newbie here, I'm trying to make a search filter and I'm not sure why I'm getting this error:

TypeError: Cannot read property 'toLowerCase' of undefined

The problem looks like it's the data type of what is entered with toLowerCase, but I don't know exactly how to fix it.

I've tried everything in the answer below

let mangas = [
    {
        id: '4',
        name: 'Some Manga',
        author: 'Some Name',
        artist: 'Some Name',
        chapters: 'Some Number',
    }, 

function Search() {
    const [search, setSearch] = useState('');
    return (
        <div>
            <Navbar1 />
            <NavbarExplore />
            <section className="bg-light" style={{ minHeight: 700 }}>
                <div className="container">
                    <div className="column pb-5 mb-5" style={{ minHeight: 800 }}>
                        <h1
                            className="top-header pt-5 mb-5"
                            style={{ borderBottom: '1px black solid', width: 400 }}
                        >
                            Full List
                        </h1>{' '}
                        <div className="nav-item px-2 mr-4 mb-4">
                            <form className="form-inline" action="/action_page.php">
                                <input
                                    type="search"
                                    placeholder="Search.."
                                    className="mr-sm-2 pl-3 my-2 ml-3 search3"
                                    onChange={(e) => {
                                        setSearch(e.target.value);
                                    }}
                                />
                            </form>
                        </div>
                        <div className="row" style={{ listStyleType: 'none' }}>
                            {Object.keys(mangas)
                                .filter((val) => {
                                    if (search === '') {
                                        return val;
                                    } else if (
                                        val.name.toLowerCase().includes(search.toLowerCase())
                                    ) {
                                        return val;
                                    } else {
                                        return 'null';
                                    }
                                })
                                .map((key) => (
                                    <li key={key}>
                                        <div className="card m-2 mb-3 p-2 listbox">
                                            <div className="column">
                                                <div className="col-sm mb-2" style={{ color: 'black' }}>
                                                    <h3>{mangas[key].name}</h3>

Answer 1

try using

  Object.values(mangas).filter((val) => {

                                if (search === '') {
                                    return val;
                                } else if (                                    
    val?.name.toLowerCase().includes(search.toLowerCase())
                                ) {
                                    return val;
                                } else {
                                    return 'null';
                                }
});